I'm following the mozilla documentation on using css clip-path
property to apply an svg clipPath
to an HTMLElement
. But for some reason, it doesn't work for me, not in div's and not in images.
In the documentation, it says you can easily clip an element with this code:
<style>.target { clip-path: url(#c1); }</style>
<svg:svg height="0">
<svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
<svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
<svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
</svg:clipPath>
</svg:svg>
And I've tried that, but it doesn't work. The clip-path
property works with predefined methods like polygon() and ellipse() but it won't work with a linked svg.
I made a JSFiddle illustrating my problem, hopefully you can find my mistake :)