put an image in a svg with a higher z-index - HTML CSS SVG

HTML CSS examples for SVG:Image

  1. HOME
  2. HTML CSS
  3. SVG
  4. Image

Description

put an image in a svg with a higher z-index

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from   w w  w .  j a v a 2  s. co  m-->
 <body> 
  <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,60 50,30 T0,30 v20 h100Z" style="stroke-linejoin:round; stroke:#f6f6f6" stroke-width="0" /> 
     </g> 
     <image xlink:href="https://www.java2s.com/style/demo/InternetExplorer.png" x="0" y="-30" width="300px" height="150px" style="z-index: 9999" /> 
    </svg> 
   </symbol> 
  </svg> 
  <div class="svg-header-wave"> 
   <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" /> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials