¿Cómo obtengo el ancho de un elemento SVG escalado con JavaScript?

Question

Si tengo SVG en línea, incluyendo un elemento que ha sido reducido ...

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

... o que está en un elemento <svg> con un atributo 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> 

... ¿Cómo puedo encontrar, programáticamente, el nuevo ancho de escala en píxeles de myElement, sin detectar manualmente la escala y los cálculos matemáticos? Hasta el momento myElement.getBBox().width devuelve 245 sin tener en cuenta la escala.

Answer 1

favor marque esta violín http://jsfiddle.net/T723E/. Haga clic en los rectángulos y observe la consola Firebug. Aquí he codificado un número .3 que es 300px ancho de div que contiene svg node/1000 unidades de usuario.

Después de ver la generosidad, esta es la función que tengo de retorno para obtener el ancho reducido sin mucho (sin matemáticas no estoy seguro.) Maths.Use matrix.d para conseguir la altura

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

escalado favor mira este violín para el código completo http://jsfiddle.net/b4KXr/

Answer 2

¿Ha investigado el parámetro que puede usar con getBBox()?

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