I have a svg and I want to put an image inside of it.
The svg looks like a wave.
The image should be in front of the wave (visible) but the problem is it is now hiding behind the wave.
I tried already with a higher z-index but without result.
How can I make the image visible in front of the wave?
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="wave">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" >
<g>
<!--<path d="M100,30 Q70,40 50,30 T0,30 v20 h100Z" -->
<path d="M100,30 Q70,60 50,30 T0,30 v20 h100Z"
style="stroke-linejoin:round; stroke:#f6f6f6" stroke-width="0"/>
</g>
</svg>
</symbol>
</svg>
<div class="svg-header-wave">
<svg class="header-wave" style="width: 100%; height: 150px" fill="url(#gradient)">
<image xlink:href="http://develop.webprofis.nl/wisselslag/img/logo.png" x="0" y="-30" width="300px" height="150px" style="z-index: 9999"/>
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#009de1"/>
<stop offset="100%" stop-color="#102b72"/>
</linearGradient>
</defs>
<use xlink:href="#wave"/>
</svg>
</div>
Here is a fiddle you can see what happens: https://jsfiddle.net/jotect8j/7/
Just include the image tag after the wave.
SVG elements are by default layed over top of one another in the order of their inclusion.
So first element is at the bottom, while last is on top.
<svg class="header-wave" style="width: 100%; height: 150px" fill="url(#gradient)">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#009de1"/>
<stop offset="100%" stop-color="#102b72"/>
</linearGradient>
</defs>
<use xlink:href="#wave"/>
<image xlink:href="http://develop.webprofis.nl/wisselslag/img/logo.png" x="0" y="-30" width="300px" height="150px" style="z-index: 9999"/>
</svg>