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()功能,因为您不知道您的用户将使用哪个浏览器.

修复了关于子像素渲染的Firefox和IE9的问题.如果纸张在回流后依赖于其他元素,则可能会移动半像素,导致线条失去其脆性.此方法可以解决此问题.