raphaeljs中的线宽

Question

在SVG或raphaeljs中使用1px重量线是否真实？

以下代码

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

画线看起来像2px或3px。还有其他选择吗？

Answer 1

当SVG线位于它们看似正确的坐标时，它们实际上位于像素之间，因此当您声明M1 1 L50 1时，它会在顶部绘制半个像素，在像素底部绘制另一半像素，使其看起来像一条厚厚的半透明线。

要解决此问题，您需要绘制半像素，或者将元素转换为半个像素，即。 element.translate(0.5, 0.5)

您可以在此处看到模糊和清晰的线条： http://jsfiddle.net/k8AKy/

Answer 2

您还应该使用Paper.renderfix()功能，因为您不知道您的用户将使用哪种浏览器。

来自documentation

  

修复了关于子像素渲染的Firefox和IE9的问题。如果   回流后纸张可能会转移一半，这取决于其他元素   导致线条失去清晰度的像素。这种方法修复了   这个问题。

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

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图像中的所有形状产生影响....