JavaScript ile ölçeklendirilmiş bir SVG öğesinin genişliğini nasıl alabilirim?

Question

Ben ölçekli edilmiş bir element içeren satır içi SVG, ... bir viewBox özelliği olan bir <svg> elemanının içinde

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

... ya varsa:

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

... Ölçeklendirmeyi el ile algılamadan ve matematik yapmadan, yeni ölçek genişliğini myElement pikselinde nasıl programlayabilirim? Şimdiye kadar myElement.getBBox().width, ölçeklemeyi hesaba katmadan 245 döndürür.

Answer 1

bu keman http://jsfiddle.net/T723E/ kontrol ediniz. Dikdörtgenlere tıklayın ve firebug konsoluna dikkat edin. Burada svg düğüm/1000 kullanıcı birimi içeren div 300px genişliği olan bir sayı .3 kodlanmış.

ödül gördükten sonra bu i dönüş olmadan çok ölçekli genişliğini almak zorunda fonksiyonudur İç yükseklik

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

ölçekli koyulmak için maths.Use matrix.d (hiçbir matematiğe i. Emin değilim) Lütfen tam kod için bu klavyeye bakın http://jsfiddle.net/b4KXr/

Answer 2

GetBBox() ile kullanabileceğiniz parametreyi araştırdınız mı?

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