Snap.svg scale and rotate around centre

by mrjordy

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>

    <!-- Placeholder HTML element -->
    <div class="mySVGContainer2">

      <!-- SVG root node -->
      <svg id="mySVG2" height="200" width="200" viewBox="0 0 1024 768">
      <!-- SVG triangle path -->
      <path id="alabama" d="m1662.4 1572.5c-0.4-1.2-1.4-1.4-4.1-0.9l-3.5 0.7 0.6-37.9c0.3-20.8 0.8-39.9 1-42.4 0.2-2.5 0.8-8.3 1.2-13 0.4-4.7 0.9-9.3 1-10.2 0.2-0.9 0.6-5.6 1-10.4s0.8-9.4 0.9-10.3c0.2-1.1 1.4-1.6 4.1-1.7 2.1-0.1 13.2-0.4 24.6-0.8l20.7-0.6 1 3.7c0.5 2.1 1.5 6 2.1 8.7 0.6 2.8 2 7.7 3.1 11 1.8 5.6 3.1 12.8 4.4 24.3 0.3 2.6 1.9 7.3 3.5 10.5 3.1 6 3.2 6.6 2.8 22.8-0.2 8.1 0.1 10.8 2.1 19.3 0.5 2.1 0.6 3.9 0.2 4.1-0.4 0.2-6.7 0.4-14.1 0.5s-19.6 0.4-27 0.8c-11.9 0.5-13.7 0.8-15.2 2.6-2.2 2.5-2.2 2.2 0.6 9.3 1.3 3.3 2.7 7.2 3 8.7l0.7 2.8h-7.1c-5.4 0-7.2-0.4-7.6-1.5z" />
      Sorry, your browser does not support inline SVG.
    </svg>
      <!-- /end SVG root. -->

     

    </div>

CSS

svg#mySVG2 {
  overflow: visible;
}

JavaScript

var jazz = "r" + (Math.floor(Math.random() * 989) -500)+",";

p = Snap(".mySVGContainer2");

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

triangle2.animate({ transform: jazz + bbox.cx + ',' + bbox.cy + "s1,1," + bbox.cx + "," + bbox.cy}, 2000);