Edge / corner color issues with SVG line / path-CodePudding

This:

<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>

produces image like this in Chrome (zoomed in so it's obvious):

Top part

Bottom part

Note that the edges of the lines and the corners of the rectangles are of a slightly lighter red.

This looks like it's anti-aliasing, but trying shape-rendering="crispEdges" suggestion in

Bottom part

Is there a way to fix this somehow, so I get the same line color across the specified coordinate range?

CodePudding user response：

On Win64 Chrome, I'm only seeing the antialiasing on the first two elements.

The explanation for the line element is simple. Because you are translating down by half a pixel, the two line ends are ending halfway up/down a pixel. Hence you will get antialiasing in that case. Adjust the coords, or add stroke-linecap="square" to fix that.

Illustration:

<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>

As for the zero width rectangle. Not sure what's happening there. It is only slightly lighter. It is likely a rendering bug in Skia. It may only effect the GPU renderer of Skia (I didn't check). The GPU renderer has a few more rendering bugs on these sort of edge cases than the CPU rendering path. If you care, you could 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>