Search code examples
htmlcsssvgclip-path

Using many external svg clippaths in firefox

The problem

I'm trying to crop two images to some triangle shape via clippath, but when I try to move the inline svg code to an external file, only the fp clippath applies to the image. The image with the sp path disappears completely.

Please note that I'm using Firefox and therefore cannot use pure css and the clip-path: polygon() style.

The SVG code

<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
    <defs>
        <clipPath id="fp">
            <polygon points="0 0, 100 0, 0 100"/>
        </clipPath>

        <clippath id="sp">
            <polygon points="100 0, 100 100, 0 100"/>
        </clippath>
    </defs>
</svg>

The working fiddle

This fiddle works because it's inline SVG. Try to move it to a separate file and refer to it in the css. It won't work.

https://jsfiddle.net/qkqovjmq/4/

Solution

  • I solved it by using the jQuery clip path plugin which renders all clip paths correctly.