HTML5 SVG抗锯齿会导致路径之间出现灰线.如何避免呢? [英] HTML5 SVG anti-aliasing causes grey line between paths. How to avoid it?

问题描述

有一个虚构的正方形，我想绘制成两个半部分，即两个三角形.它们应该完美地契合在一起并形成一个正方形，但出现了由抗锯齿引起的细线.

There is an imaginary square which I want to draw as two halves, i.e. two triangles. Whilst they should perfectly fit together and make a square, a tiny line caused by anti-aliasing appears.

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

These triangles should be of different color, but I left both them black in the given example to make the line more visible.

<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等.我只想知道可能会改善渲染的解决方案.

I am open to solutions - canvas, WebGL etc. I just want to know possible solutions which would improve rendering.

推荐答案

我不确定您为什么使用剪切路径查看该线，但是如果我将其更改为使用常规多边形并使用shape-rendering: crispEdges不会出现:

I'm not sure why you are seeing the line using clip paths, but if I just change it around to using regular polygons and use shape-rendering: crispEdges the line doesn't appear:

<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抗锯齿会导致路径之间出现灰线.如何避免呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！