Javascript HTML5 SVG消除混叠会导致路径之间出现灰线。如何避免呢？

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

这些三角形应该具有不同的颜色，但在给定的示例中，我将它们都保留为黑色，以使线条更加可见

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

---

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

我不确定您为什么会看到使用剪辑路径的线条，但如果我只是将其改为使用规则多边形并使用

形状渲染：CrispEdge

则线条不会出现：

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

您是否尝试将shape rendering=“CrispEdge”添加到clipPath路径？它确实出现了，至少在Chrome上是这样。@kurideja我忘了添加

CrispEdge

样式。编辑后再试一次。添加“形状渲染：CrispEdge”为我解决了这个问题。谢谢