CODEWITHSUNDEEP
javascripthtmlsvg
kurideja
kurideja

Reputation: 208

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

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

Upvotes: 3

Views: 934

Answers (1)

DigitalZebra
DigitalZebra

Reputation: 41473

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>

Upvotes: 2

Related Questions