Create Full size background-image to SVG path - HTML CSS SVG

HTML CSS examples for SVG:Image

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

Description

Create Full size background-image to SVG path

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--   w w  w . ja  v a  2  s .co  m-->
 <body> 
  <svg height="400" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;"> 
   <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
     Created with Rapha?l 2.1.2 
   </desc> 
   <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
    <pattern id="1546A235-C4BA-4ED7-A544-C43CE0BA3109" x="0" y="0" patternunits="userSpaceOnUse" height="100%" width="100%" patterntransform="matrix(1,0,0,1,0,0) translate(24,12)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> 
     <image x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://www.java2s.com/style/demo/Google-Chrome.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="80%" height="80%"></image> 
    </pattern> 
   </defs> 
   <path stroke="none" d="M24,48L313,12L342,174L98,280Z" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill="url(#1546A235-C4BA-4ED7-A544-C43CE0BA3109)"></path> 
  </svg>  
 </body>
</html>

Related Tutorials