How do I get the width of a scaled SVG element with JavaScript? - Stack Overflow

admin管理员组

文章数量:1335445

If I have inline SVG, including an element which 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 a <svg> element with a 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 detecting the scaling and doing the math? So far myElement.getBBox().width returns 245 without accounting for the scaling.

If I have inline SVG, including an element which 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 a <svg> element with a 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 detecting the scaling and doing the math? So far myElement.getBBox().width returns 245 without accounting for the scaling.

• javascript
• svg
• width

Share Improve this question Follow edited Feb 29, 2012 at 20:07 Richard JP Le Guen asked Feb 8, 2012 at 16:12 Richard JP Le GuenRichard JP Le Guen 28.8k88 gold badges9393 silver badges120120 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8 +250

please check this fiddle http://jsfiddle/T723E/. Click on the rectangles and note the firebug console. Here i have hard coded a number .3 which is 300px width of div containing svg node / 1000 user units.

After seeing the bounty, this is the function i have return to get the scaled width without much (with no maths i'm not sure.)maths.Use matrix.d for getting 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))

Please look this fiddle for plete code http://jsfiddle/b4KXr/

Have you investigated the parameter you can use with getBBox()?

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

本文标签： How do I get the width of a scaled SVG element with JavaScriptStack Overflow