Snap.svg scale and rotate around centre

by Valerie Ren

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <!-- Placeholder HTML element -->
  <div id="mySVGContainer1">
  
    <!-- SVG root node -->
    <svg id="mySVG1" height="200" width="200" viewBox="0 0 1024 768">
      <!-- SVG triangle path -->
      <path id="myShape1" d="M150 0 L75 200 L225 200 Z" />
      Sorry, your browser does not support inline SVG.
    </svg><!-- /end SVG root. -->
    
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

  </div>
  
  <!-- Placeholder HTML element -->
  <div id="mySVGContainer2">
  
    <!-- SVG root node -->
    <svg id="mySVG2" height="200" width="200" viewBox="0 0 1024 768">
      <!-- SVG triangle path -->
      <path id="myShape2" d="M150 0 L75 200 L225 200 Z" />
      Sorry, your browser does not support inline SVG.
    </svg><!-- /end SVG root. -->

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    
  </div>
  
</body>
</html>

JavaScript

s = Snap("#mySVGContainer1");

var triangle1 = s.select("#myShape1").transform();

p = Snap("#mySVGContainer2");

var triangle2 = p.select("#myShape2");
var bbox = triangle2.getBBox(); //bounding box, get coords and centre

triangle2.animate({ transform: "r360," + bbox.cx + ',' + bbox.cy + "s3,3," + bbox.cx + "," + bbox.cy}, 2000);