title: How to center SVG within its container?
body: <p>How does one center this SVG horizontally within <code>.svg_wrapper</code>?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.svg_wrapper {
    border: 1px solid grey;
    width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="svg_wrapper"&gt;
    &lt;svg viewBox="0 0 600 425"&gt;
              &lt;path 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="black" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000"&gt;
                  &lt;animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze" /&gt;
              &lt;/path&gt;
          &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://jsfiddle.net/frank_o/fj7Xc/" rel="nofollow noreferrer">http://jsfiddle.net/frank_o/fj7Xc/</a></p>
  <p>Tried stuff like <code>margin: 0 auto</code>, <code>text-align: center</code> as well as flexbox but to no avail.</p>