use webkit css masks with SVG without an external file - HTML CSS SVG

HTML CSS examples for SVG:polygon

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

Description

use webkit css masks with SVG without an external file

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--  ww  w . jav  a  2  s . co m-->
 <body> 
  <svg width="200" height="200"> 
   <defs> 
    <pattern id="img1" patternunits="userSpaceOnUse" width="200" height="200"> 
     <image xlink:href="https://www.java2s.com/style/demo/Safari.png" x="0" y="0" width="200" height="200" /> 
    </pattern> 
   </defs> 
   <polygon fill="url(#img1)" stroke-width="3" points="99.50000005960464,0.9999950610674375 99.50000005960464,0.9999950610674375 198,50.249996235584604 198,148.75000002980232 99.50000005960464,198 99.50000005960464,198 1.0000001192092896,148.75000002980232 1.0000001192092896,50.249996235584604 " /> 
  </svg>  
 </body>
</html>

Related Tutorials