如何使用JavaScript獲取縮放SVG元素的寬度？

Question

如果我有聯SVG，包括已縮放的元素...

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

...或處於<svg>元件與viewBox屬性：

<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> 

...我怎樣才能以編程的方式找到myElement像素的新縮放寬度 - 無需手動檢測縮放比例和數學運算？到目前爲止myElement.getBBox().width返回245而不考慮縮放。

Answer 1

請這個小提琴http://jsfiddle.net/T723E/。點擊矩形並記下螢火蟲控制檯。 在這裏我已經硬編碼了一個數字.3，它是包含svg節點/ 1000個用戶單位的div的300px寬度。

看到賞金後，這是函數I的回報，以獲得縮放寬度沒有太多（沒有數學我不知道。）maths.Use matrix.d用於獲取縮放高度

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)) 

請看這個小提琴的完整代碼http://jsfiddle.net/b4KXr/

Answer 2

你調查了你可以使用getBBox（）的參數嗎？

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