Question

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

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

<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

我对解决方案持开放态度 - 画布，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>

HTML5 SVG抗锯齿导致路径之间的灰线。如何避免它？

1 个答案: