SVG 线/路径的边/角颜色问题

Question

这个：

<svg width=100 height=100>
  <g transform="translate(0.5, 0.5)" stroke=red fill=none>
    <line x1=10 y1=10 x2=10 y2=50 />
    <path d="M20,10 H20 V50 H20 Z" />
    <path d="M30,10 H31 V50 H30 Z" />
    <path d="M40,10 H42 V50 H40 Z" />
    <path d="M50,10 H52 V50 H50 Z" />
  </g>
</svg>

在 Chrome 中生成这样的图像（放大后很明显）：

顶部

底部

请注意，线条的边缘和矩形的角是稍微浅一点的红色。

这看起来像是抗锯齿功能，但尝试中的 shape-rendering="crispEdges" 建议并没有完全奏效。问题是它然后将线切割 1px 而不是：

<svg width=100 height=100>
  <g shape-rendering="crispEdges" stroke=red fill=none>
    <line x1=10 y1=10 x2=10 y2=50 />
    <path d="M20,10 H20 V50 H20 Z" />
    <path d="M30,10 H31 V50 H30 Z" />
    <path d="M40,10 H42 V50 H40 Z" />
    <path d="M50,10 H52 V50 H50 Z" />
  </g>
</svg>

顶部

底部

有没有办法以某种方式解决这个问题，让我在指定的坐标范围内获得相同的线条颜色？

Answer 1

在 Win64 Chrome 上，我只看到前两个元素的抗锯齿。

行元素的解释很简单。因为您要向下平移半个像素，所以两条线的末端在 up/down 一个像素的一半处结束。因此在这种情况下你会得到抗锯齿。调整坐标，或添加 stroke-linecap="square" 来解决这个问题。

插图：

<svg viewBox="0 0 70 40" width="420">
  <g transform="translate(10,10)">
    <g fill="none" stroke="#ccc" id="grid">
      <rect width="10" height="10"/>
      <rect x="10" width="10" height="10"/>
      <rect y="10" width="10" height="10"/>
      <rect x="10" y="10" width="10" height="10"/>
    </g>

    <!-- line (as is) -->
    <line x1="5" y1="20" x2="5" y2="5" stroke="#00c8" stroke-width="10"/>
    <line x1="5" y1="20" x2="5" y2="5" stroke="red" stroke-width="1"/>
  </g>

  <g transform="translate(40,10)">
    <use xlink:href="#grid"/>

    <!-- rectamngle corner -->
    <path d="M 5,20 L 5,5 L 20,5" fill="none" stroke="#00c8" stroke-width="10"/>
    <path d="M 5,20 L 5,5 L 20,5" fill="none" stroke="red" stroke-width="1"/>
  </g>


</svg>

至于零宽度矩形。不知道那里发生了什么。它只是稍微轻一点。这可能是 Skia 中的渲染错误。它可能只会影响 Skia 的 GPU 渲染器（我没有检查）。与 CPU 渲染路径相比，GPU 渲染器在这些边缘情况下有更多的渲染错误。如果你关心，你可以 file a bug about it.

<svg width=100 height=100>
  <g transform="translate(0.5, 0.5)" stroke=red fill=none>
    <line x1=10 y1=10 x2=10 y2=50 stroke-linecap="square"/>
    <path d="M20,10 H20 V50 H20 Z" />
  </g>
</svg>

SVG 线/路径的边/角颜色问题

Edge / corner color issues with SVG line / path

svg