Can't get clip-path to work with external svg - html

Question

I'm trying to get an image clipped by a external svg file.
I can get it to work applying eg. a polygon directly to the css, but when I try to link it to an external svg, it's not working.
This is my image that needs to be clipped:
<img src="{{ asset('/images/hero.jpg') }}" class="hero-image">
This is my svg
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1366 706" style="enable-background:new 0 0 1366 706;" xml:space="preserve">
<defs>
<clipPath id="bg-clipping">
<path d="M-0.6-15.6l76.8,612.4c0,0,6.6,104.8,108.4,107.2C243.8,705.3,1363,571.9,1363,571.9L1364.3,3L-0.6-15.6z"/>
</clipPath>
</defs>
</svg>
and here is my css
.hero-image {
#apply absolute w-full h-full;
clip-path: url("#bg-clipping");
}
Please save me, heroes of Stackoverflow. I've been struggling for a loooooong time now.

Answer 1

If the SVG is on a different URL, you're probably out of luck. Firefox is currently the only browser that supports this (CanIUse chart footnote 2).
If you're OK with it only working in Firefox, you can define the clip-path like so.
.hero-image {
clip-path: url("path/to/svg.svg#bg-clipping");
}
Interesting caveat: while it does work with relative URL's (as demonstrated here), it doesn't work with absolute URL's to a different domain (demo here). I can't find an explanation for this in the spec, it appears to be a bug.
When the SVG is on the same page as the image, it should work fine. Browser support is better.
body {
margin: 0;
}
.hero-image {
min-height: 706px;
clip-path: url("#bg-clipping");
}
<img src="https://picsum.photos/id/1015/1366/706" class="hero-image">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1366 706">
<defs>
<clipPath id="bg-clipping">
<path d="M-0.6-15.6l76.8,612.4c0,0,6.6,104.8,108.4,107.2C243.8,705.3,1363,571.9,1363,571.9L1364.3,3L-0.6-15.6z"/>
</clipPath>
</defs>
</svg>