All geek questions in one place

How to get width of scaled SVG element using JavaScript?

If I have built-in SVG, including an element that has been scaled ...

<g transform="scale(sX,sY)"> <rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" /> </g>

... or which is in the <svg> element with the viewBox attribute:

 <svg viewBox="20 20 5000 1230"> <g transform="scale(sX,sY)"> <rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" /> </g> <svg>

... how can I programmatically find the new scaled width in pixels of myElement - without manually defining the scaling and doing the math? So far, myElement.getBBox().width returns 245 without scaling.

+6
source share
2 answers

check this script http://jsfiddle.net/T723E/ . Click on the rectangles and pay attention to the firebug console. Here, I hardcoded a .3 number, which is 300 pixels wide of a div containing svg node / 1000 user units.

After viewing the slit, this is the function I returned to get the scaled width without much (no math, I'm not sure.) Maths.Use matrix.d to get the scaled height

  var svg = document.getElementById('svg'); function getTransformedWidth(el){ var matrix = el.getTransformToElement(svg); return matrix.a*el.width.animVal.value; } var ele = document.getElementById('myElement_with_scale') console.log("scale width----", getTransformedWidth(ele))

Check out this script for full code http://jsfiddle.net/b4KXr/

+7
source

Have you explored a parameter that you can use with getBBox ()?

http://raphaeljs.com/reference.html#Element.getBBox

0
source

Source: https://habr.com/ru/post/907962/

More articles:


All Articles