CODEWITHSUNDEEP
svgantialiasingclip-path
Antony Ng
Antony Ng

Reputation: 797

Svg reveal background at edges if using clip path

I have a yellow rect with a red path as background, if I try to clip it using a polygon, the edges reveal the red background.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="139px" height="154px" >
    <defs>
        <clipPath id="c1">
            <polygon points="10,10 20,10, 40,50, 50,100 90,90" />
        </clipPath>
    </defs>
    <g>

        <g clip-path="url(#c1">
            <path d="M 21.14 1.12 L 20.5 151 L 115.5 151 L 114.43 1.12 Z" fill="red" stroke="none" pointer-events="none" />
            <rect x="21.14" y="1.12" width="93.29" height="148.52" fill="#ebe078" stroke="none" pointer-events="none" />
        </g>
    </g>
</svg>

enter image description here

Anyone have any idea how to solve this? I have tried using crispe edges like:

HTML5 SVG anti-aliasing causes grey line between paths. How to avoid it?

But still have this same issue. Thanks.

Upvotes: 2

Views: 348

Answers (1)

Antony Ng
Antony Ng

Reputation: 797

Problem solved by replace clipPath and clip-path with mask (and put fill="white" on the polygon inside the mask):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="139px" height="154px" >
    <defs>
        <mask id="c1">
            <polygon points="10,10 20,10, 40,50, 50,100 90,90" fill="white"/>
        </mask>
    </defs>
    <g>
        
        <g mask="url(#c1">
            <path d="M 21.14 1.12 L 20.5 151 L 115.5 151 L 114.43 1.12 Z" fill="red" stroke="none" pointer-events="none" />
            <rect x="21.14" y="1.12" width="93.29" height="148.52" fill="#ebe078" stroke="none" pointer-events="none" />
        </g>
    </g>
</svg>

Upvotes: 2

Related Questions