title: Resizing SVG animation while keeping it centered in its container
body: <p>I'm trying to center the <code>&lt;path&gt;</code> animation horizontally and vertically (after having scaled it down with <code>transform="scale(0.5))</code> while keeping the <code>&lt;svg&gt;</code> at 100% width and height of its container. I'm using <a href="http://snapsvg.io/" rel="nofollow">Snap.svg</a>.</p>
  
  <p>As you can see below, the <code>&lt;svg&gt;</code> is fine but the <code>&lt;path&gt;</code> is all crammed up in the upper left corner.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var s = Snap("#me");
  
  
  var myPath = s.select("#mypath");
  
  function reset( el ) {
      el.stop();
      el.attr({ "stroke-dashoffset": 125 });
  };
  
  function startAnim( el ) {
      el.animate( { "stroke-dashoffset": 600 }, 1000 );
  };
  
  reset( myPath );
  
  s.mouseover( function() {
    startAnim( myPath );
  } );
  
  s.mouseout( function() {
    reset( myPath );
  } );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test {
      border: 1px solid black;
      height: 500px;
      width: 500px;
  }
  #me { 
    border: 2px solid green;
  }
  #mypath { 
    border: 2px solid blue;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://tedbeer.net/lib/snap.svg-min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="test"&gt;
      &lt;div class="pie"&gt;
          &lt;svg id="me" viewBox="0 0 350 350"&gt;
          &lt;!--&lt;svg id="me" viewBox="0 0 350 350" width="100" height="100"&gt;--&gt;
              &lt;path id="mypath" d="M 175, 175 m 0, -75 a 75, 75 0 1, 0 0, 150 a 75, 75 0 1, 0 0, -150" fill="none" stroke="#ccc" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000" transform="scale(0.5)"&gt;
              &lt;/path&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>