svg - 为什么SVG笔画宽度为: 1 making lines transparent?

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是一个字符串变量，预先确定为“green”、“red”或“black”。

我的代码中是否有问题导致此问题，还是其他问题？

Answer 1

可能有点晚了，但真正的原因是，当您在无限小的网格线上绘制时，笔画宽度为 1 的线会从网格左右(或上方/下方)呈现为半像素线。我通过使用变换 0.5,0.5 在所有对象周围添加一个组来解决这个问题，因此所有内容都移动了半个网格线。

因此，您绘制的所有内容现在都恰好位于 2 条网格线的中间。笔画宽度为 1 的线现在将在左侧有半个像素，在左侧有半个像素，但两者都从中间开始。产生一条与您想要的厚度完全一致的线:1 像素...

例子:

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