Raphaeljs中的线宽

Question

在SVG或raphaeljs中制作1像素宽的线条是可行的吗？

以下是代码：

 var p = Paper.path("M1 1 L50 1");
 p.attr("stroke", "#D7D7D7");
 p.attr("stroke-width", "1");
 p.attr("opacity", 0.5);

如何绘制看起来像是 2px 或者 3px 的线条？有没有其他的替代方案？

- Neir0

---

类似于https://dev59.com/92sz5IYBdhLWcg3w5MA0 - Erik Dahlström

我在研究一个类似的问题的时候来到这里：我的raphael画布在CSS中向左偏移了-0.5像素。造成这个问题的原因是为了解决上述情况而实施的renderfix()函数。在这里可以找到更多信息：https://github.com/DmitryBaranovskiy/raphael/issues/614 - Steve Tauber

Answer 1

SVG线条位于它们表面上的正确坐标之间，所以当你声明M1 1 L50 1时，它将在像素顶部绘制半个像素，并在像素底部绘制另一半，使得它看起来像是一条厚重的半透明线。

要解决这个问题，你需要在半个像素处进行绘制，或者将元素平移半个像素，例如：element.translate(0.5, 0.5)

你可以在这里查看模糊和清晰的线条效果：http://jsfiddle.net/k8AKy/

- methodofaction

Answer 2

你应该使用Paper.renderfix()函数，因为你不知道用户将使用哪种浏览器。

来自文档

修复了Firefox和IE9关于亚像素渲染的问题。如果画布依赖于其他元素，那么在重排后它可能会移动半个像素，导致线条失去清晰度。这个方法可以解决这个问题。

- Chasbeen

Answer 3

这些链接可以带您了解整数坐标出现问题的原因，以及为什么使用+0.5来修复边缘模糊（其中还有漂亮的图片！）：

• http://diveintohtml5.info/canvas.html#pixel-madness
• http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas/

与+0.5相比较：

+0.5:

您可以通过以下方法避免+0.5：

SVG_Area.setAttribute("viewBox", "0.5 0.5 " + width + " " + height);

或者通过包装器：

function fiXY(x) { return parseInt(x) + 0.5; }
var rect = document.createElementNS(SVGobj.svgNS, "rect");
rect.setAttribute("x", fiXY(x));
rect.setAttribute("y", fiXY(y));

或者通过：

SVG_Area.setAttribute("shape-rendering", "crispEdges");

这将影响您SVG图像中的所有形状....

- gavenkoa

---

还可以查看https://dev59.com/d1rUa4cB1Zd3GeqPhzx6 - gavenkoa