D3js SVG Transform Rotate Group

Browse more D3js Examples

<!DOCTYPE html>
   <html>
      <head>
         <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
         <style>
            body { font-family: Arial; }
         </style>
      </head>

      <body>
         <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <g transform = "translate(60,60) rotate(30)">
               <rect x = "20" 
                  y = "20" 
                  width = "60" 
                  height = "60" 
                  fill = "green">
               </rect>
               <circle cx = "0" 
                  cy = "0" 
                  r = "30" 
                  fill = "red"/>
            </g>
         </svg>
      </div>
   </body>
</html>

D3js SVG Transform Rotate Group

Follow

Newsletter