svg - Raphael.js中的线宽

在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的线。还有其他选择吗？

最佳答案

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

要解决此问题，您需要以半像素绘制，或将元素转换为半像素，即。 element.translate(0.5, 0.5)
您可以在此处看到模糊和清晰的线条:
http://jsfiddle.net/k8AKy/

关于svg - Raphael.js中的线宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8036519/