javascript - HTML5 SVG 抗锯齿导致路径之间出现灰线。如何避免？

Question

有一个假想的正方形，我想把它画成两半，即两个三 Angular 形。虽然它们应该完美地结合在一起并形成一个正方形，但出现了一条由抗锯齿引起的细线。

这些三 Angular 形应该有不同的颜色，但在给定的示例中我将它们都保留为黑色以使线条更明显。

<svg width="100" height="100"
     viewPort="0 0 100 100" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <defs>
        <clipPath id="first">
          <path d="M 0 0 L 100 100 L 0 100 Z" fill="red"/>
        </clipPath>
        <clipPath id="second">
<path d="M 0 0 L 100 0 L 100 100 Z" fill="red"/>
        </clipPath>
    </defs>

    <rect width="100" fill="black" height="100"
          clip-path="url(#first)"/>
    <rect width="100" fill="black" height="100"
          clip-path="url(#second)"/> 
</svg>

JSFiddle

我对解决方案持开放态度 - canvas、WebGL 等。我只想知道可以改进渲染的可能解决方案。

Answer 1

我不确定为什么您会看到使用剪辑路径的线，但如果我只是将其更改为使用正多边形并使用 shape-rendering: crispEdges，则该线不会出现:

<svg width="100" height="100" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 100,0 100,100" style="fill:black;shape-rendering:crispEdges;" />
    <polygon points="0,0 100,100 0,100" style="fill:black;shape-rendering:crispEdges;" />
</svg>