html - 缩放的 SVG 导致线宽不均匀

Question

我有一个动态渲染的 SVG，它基于一些 CSS（外部容器）进行缩放。问题是对于很多尺寸，垂直线出现宽度不均匀（我增加了一点宽度以更好地说明问题，但它们应该具有相同的宽度。我怀疑它与子像素对齐有关，但无法找到解决此问题的方法...

这是示例行的代码：

.timetable-vertical-line line {
      stroke: rgba(0,0,0,0.2);
      stroke-width: 5;
  }

<svg class="timetable-vertical-line" x="50" y="0" width="100" height="440">
    <line vector-effect="non-scaling-stroke" x1="0" y1="0" x2="0" y2="440"></line>
</svg>

编辑：我也尝试过使用shape-renderingwhich 也没有帮助

标签： htmlcsssvg