title: how to make svg animation scaling around a center of a figure?
body: <p>I'm trying to pulsate a star by using <code>animateTransform</code> with <code>type="scale"</code>, but instead of scaling around a center of the star, it scales to left and down. How to scale the star around the center?</p>
  
  <p>Svg code:</p>
  
  <pre><code>&lt;svg version="1.1" id="star" xmlns="http://www.w3.org/2000/svg" x="170px" y="385px" width="100px" height="100px" viewBox="0 0 60 60" xml:space="preserve"&gt;
      &lt;g&gt;
          &lt;polygon fill="#DAC978" points="18.832,36.694 5.903,25.156 23.146,23.419 30.125,7.557 37.104,23.419 54.347,25.155 41.417,36.694 45.095,53.629 30.125,44.898 15.155,53.63" /&gt;
          &lt;path fill="#A58144" d="M30.125,13.765l4.104,9.327l1.175,2.669l2.901,0.292l10.139,1.021l-7.603,6.785L38.665,35.8l0.618,2.851 l2.162,9.957l-8.801-5.134l-2.519-1.469l-2.52,1.469l-8.803,5.134l2.162-9.957l0.619-2.85l-2.175-1.942l-7.603-6.785l10.139-1.021 l2.901-0.292l1.174-2.669L30.125,13.765 M30.125,1.35l-8.681,19.729L0,23.237l16.08,14.352l-4.574,21.063l18.62-10.858 l18.618,10.858L44.17,37.589l16.081-14.352l-21.445-2.159L30.125,1.35L30.125,1.35z" /&gt;
          &lt;animateTransform 
              attributeType="xml"
              attributeName="transform"
              type="scale"
              from="0"
              by="1"
              dur="1s" 
              repeatCount="10"
          /&gt;
  
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ayD2N/43/" rel="nofollow">jsFiddle</a> with working code.</p>