Получить ширину или высоту svg rectangle javascript

Question

Я могу получить ширину моего объекта svg в javascript и сохранить значение в переменной. это мой объект

<rect id="cercle1" x="5" y="25" width="50" height="50" stroke-width="1" stroke="#0E0E0E" style="fill:red; stroke:black; stroke-width:2"; /> 

Я стараюсь это:

document.getElementById ('cercle1') width.value;.

спасибо за помощь

Answer 1

Вы можете использовать функцию GetAttribute:

document.getElementById('cercle1').getAttribute("width"); 

Это получит вам строки из HTML кода. Как упоминалось в нем , вам может понадобиться число или фактическое значение (это может быть другое). Если да, обратитесь к his answer.

Answer 2

Вы можете попробовать это:

var obj = document.getElementById("cercle1"); // reference to the object tag 
var rect = obj.getBoundingClientRect(); // get the bounding rectangle 
alert(rect.width); 
alert(rect.height); 

Или это:

var obj = document.getElementById("cercle1"); // reference to the object tag 
var svgdoc = obj.contentDocument; // reference to the SVG document 
var svgelem = svgdoc.documentElement; // reference to the SVG element 
alert(svgelem.getAttribute("width")); 

Вот рабочий пример JSFiddle.

Из комментариев от Phrongz: Обратите внимание, что ограничивающий прямоугольник будет учитывать преобразования, которые могут быть или не быть желательными.

Answer 3

Атрибут width - это свойство SVGAnimatedLength. Таким образом, вам необходимо:

// If you want the original value 
var w = document.getElementById('cercle1').width.baseVal.value; 

// If it is animated and you want the current animated value 
var w = document.getElementById('cercle1').width.animVal.value; 

Или, если просто хотите, что в исходном коде:

var w = document.getElementById('cercle1').getAttribute('width')*1; // convert to num