Как получить ширину масштабированного элемента SVG с помощью JavaScript?

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/. Нажмите на прямоугольники и обратите внимание на консоль firebug. Здесь я жестко закодировал число .3, которое является шириной div 300px, содержащей svg node / 1000 пользовательских единиц.

После просмотра награды я возвращаю эту функцию, чтобы получить масштабированную ширину без особой (без математики, я не уверен.) Математики. Используйте 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