HTML5 SVG反鋸齒會導致路徑之間的灰線。如何避免它？

有一個想象的廣場，我想畫成兩半，即兩個三角形。儘管它們應該完美地融合在一起並形成一個正方形，但會出現由抗鋸齒引起的微小線條。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>

JSFiddle

我願意接受的解決方案 - 畫布，WebGL的等等。我只是想知道可能的解決辦法，提高渲染。

來源

2015-10-05 kurideja

您是否嘗試過加入shape-rendering =「crispEdges」到clipPath路徑？ –

我不知道爲什麼你正在使用夾路徑看行，但如果我只是改變它周圍的使用規則多邊形，並使用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>

來源

2015-10-05 18:20:54 Polaris878

它確實出現，至少在Chrome上。 – kurideja

@kurideja我忘了添加'crispEdges'風格。編輯後再試一次。 – Polaris878

HTML5 SVG反鋸齒會導致路徑之間的灰線。如何避免它？

回答

相關問題