为什么SVG笔划宽度:1使线条透明？

Question

我正在使用svg创建股票图表,当我将路径元素的笔触宽度设置为1时,我遇到了问题.而不是使线条更窄,它只是使它与笔划宽度相同:2但略透明.我不能发布它的图像,因为我没有足够的声誉点...

我的svg标签看起来像这样:

<div style="height:300px; width:400px; overflow:hidden">
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>

我正在使用javascript/jquery动态添加路径元素:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
$(shape).attr({"d":"...",
               "fill":"none",
               "stroke":color,
               "stroke-width":"1"});
$("svg").append(shape);

我省略了路径d属性的值,因为它有点长.此外,color是一个字符串变量,它在前面确定为"绿色","红色"或"黑色".

我的代码中是否存在导致此问题的错误或是否是另一个问题？

Answer 1

如果直线水平或垂直,只需将线条放置半个像素,例如x="1.5px".

另一种方法是在行中应用一些CSS:

.thelines{
    shape-rendering:crispEdges
}

关于形状渲染属性的规范章节.

Answer 2

这可能是由于大多数SVG实现中应用的抗锯齿.当线宽接近或低于1时,抗锯齿使得半覆盖像素呈现部分不透明.使用默认的变换和视口,您的单像素线可能恰好位于两个物理像素之间的边界上,因此它们各自被覆盖一半,从而导致整体透明度达到50%.在白色背景上使用黑线,这会产生50%的灰色.

Answer 3

也许有点晚了,但真正的原因是当你画一个无限小的网格线时,行程宽度为1的线被渲染为从网格左右(或上/下)的半像素线.我通过在变换0.5,0.5的所有对象周围添加一组来解决这个问题,所以一切都移动了半个网格线.

因此,您绘制的所有内容现在都位于两个网格线之间.行程宽度为1 wil的行现在左边有半个像素,左边有半个像素,但是从中间开始.得到的线条与您想要的厚度完全相同:1像素......

例:

<g transform="translate(0.5,0.5)">
 <g>
   <path />
   <path />
 </g>
 <g>
   <path />
   <path />
 </g>
</g>