为什么SVG stroke-width:1使线条透明?

我正在使用svg创建股票图表,当我将我的路径元素的笔画宽度设置为1时,我遇到了一个问题。而不是使线条更窄,它只是使其与stroke-width相同的大小: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属性的值,因为它很长。此外,颜色是在手之前确定为“绿色”,“红色”或“黑色”的字符串变量。

在我的代码中有什么问题导致了这个或者是不同的问题吗?

这可能是由于在大多数SVG实现中应用了反锯齿。当线宽接近或低于1时,抗锯齿使得半覆盖像素变得部分不透明。使用默认的转换和视口,您的单像素线可能完全位于两个物理像素之间的边界上,因此它们每半个覆盖一次,从而达到总体50%的透明度。在白色背景上有一条黑线,可以产生50%的灰色。
http://stackoverflow.com/questions/7401369/why-is-svg-stroke-width-1-making-lines-transparent

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:为什么SVG stroke-width:1使线条透明?