rotate a SVG hexagonal shape - HTML CSS SVG

HTML CSS examples for SVG:Pattern

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

Description

rotate a SVG hexagonal shape

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style type="text/css">
svg {<!--   www  . j  av  a2s .  c  o  m-->
   width:31%;
   margin:0 auto;
}

#hex {
   stroke-width:2;
   stroke:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
   <defs> 
    <pattern id="img" patternunits="userSpaceOnUse" width="100" height="100"> 
     <image xlink:href="https://www.java2s.com/style/demo/Opera.png" x="-40" transform="rotate(-90 50 50)" width="150" height="100" /> 
    </pattern> 
   </defs> 
   <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)" transform="rotate(90 50 50)" /> 
  </svg>  
 </body>
</html>

Related Tutorials