title: Scale path from center
body: <p>I have the following SVG graphic:</p>
  <pre><code>&lt;svg version=&quot;1.1&quot; id=&quot;diagram&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;375px&quot; height=&quot;150px&quot;&gt;
      &lt;path d=&quot;M45,11.5H33.333c0.735-1.159,1.167-2.528,1.167-4C34.5,3.364,31.136,0,27,0s-7.5,3.364-7.5,7.5c0,1.472,0.432,2.841,1.167,4H9l-9,32h54L45,11.5z M22.5,7.5C22.5,5.019,24.519,3,27,3s4.5,2.019,4.5,4.5c0,1.752-1.017,3.257-2.481,4h-4.037 C23.517,10.757,22.5,9.252,22.5,7.5z&quot; id=&quot;control&quot;/&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>I want to programmatically change the scale of this object, but I want it to scale from the center point.</p>
  <p>I've tried wrapping it around a <code>&lt;g&gt;</code> tag, like so</p>
  <pre><code>&lt;g transform=&quot;translate(0,0)&quot;&gt;
  &lt;path x=&quot;0&quot; y=&quot;0&quot; id=&quot;control&quot; transform=&quot;scale(2)&quot;&gt;...&lt;/path&gt;
  &lt;/g&gt;
  </code></pre>
  <p>But this doesn't seem to work. It seems that scaling a path requires manipulation of the <code>path</code>'s matrix, which seems horrifically difficult. Annoyingly, it's easy to scale using additive=&quot;sum&quot; property but in this instance, I am not using a transform animation.</p>
  <p>Can anyone help me out?</p>
  <p><strong>Edit:</strong> Managed to get this working nicely, for anyone who is stuck on the same thing, here is a nice way of doing it programmatically:</p>
  <pre><code>var elem = document.getElementById(&quot;control&quot;);
  var bBox = elem.getBBox();
  var scaleX = 2;
  var scaleY = 2;
  $(elem).attr(&quot;transform&quot;, `scale(${scaleX}, ${scaleY}) translate(${-bBox.width/2},${-bBox.height/2})`);
          
  </code></pre>