Apply clipPath to transformed g element in SVG - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:transform

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. transform

Description

Apply clipPath to transformed g element in SVG

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from  w ww.j av a 2s .  com-->
 <body> 
  <!--?xml version="1.0" ?--> 
  <style>
path.cell {
   fill:Chartreuse;
   stroke:yellow;
   stroke-width:.26px;
}
</style> 
  <svg width="600" height="600"> 
   <defs> 
    <clippath id="myClip"> 
     <path d="M435,144.764.7619,273,301.32,296.67.23,247.7247.34,127.31" /> 
    </clippath> 
   </defs> 
   <g id="voronoi"> 
    <g id="cells"> 
     <path class="cell" d="M435.125,144.764.76,273.83.99,301.03.323,296.67.23,247.72.34,127" /> 
    </g> 
    <g id="sites"> 
     <g clip-path="url(#myClip)"> 
      <g class="site" transform="translate(483.29,267)"> 
       <path fill="rgba(0, 255, 0, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> 
      </g> 
     </g> 
     <g class="site" transform="translate(483.29,267)"> 
      <path fill="rgba(0, 0, 255, 0.5)" d="M0,30A30,20 0 1,1 0,-30A30,20 0 1,1 0,30M0,1A1,1 0 1,0 0,-1A1,1 0 1,0 0,1Z" /> 
     </g> 
    </g> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials