Databases
StackOverflow2013
Postsdbo
POScale path from center
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScale path from center
    text
    copied!<p>I have the following SVG graphic:</p> <pre><code>&lt;svg version="1.1" id="diagram" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="375px" height="150px"&gt; &lt;path d="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" id="control"/&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 a 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="translate(0,0)"&gt; &lt;path x="0" y="0" id="control" transform="scale(2)"&gt;...&lt;/path&gt; &lt;/g&gt; </code></pre> <p>But this doesn't seem to work. I've been looking online and it seems that scaling a path requires manipulation of the paths matrix, which seems horrifically difficult. Annoyingly, its easy to scale using additive="sum" 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("control"); var bBox = elem.getBBox(); var scaleX = 2; var scaleY = 2; $(elem).attr("transform", "scale("+scaleX+", "+scaleY+") translate("+-bBox.width/2+","+-bBox.height/2+") "); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload