獲取寬度或高度SVG矩形的JavaScript

我可以讓我的對象SVG的JavaScript中的寬度，並保存在一個變量的值。這是我的對象獲取寬度或高度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。

感謝您的幫助

來源

2014-10-16 akm

順便說一句，你可以有'風格=「...」'或演示文稿屬性，但你不需要兩者都有衝突的值。例如'stroke-width =「1」**或**'style =「stroke-width：2px」'。 – Phrogz 2014-10-16 20:29:54

您可以使用getAttribute功能：

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

，將讓你從HTML代碼字符串。作爲提到，您可能希望數字而不是，或實際價值（即可能有所不同）。如果是這樣，請參閱his answer。

來源

2014-10-16 17:45:33 blex

請注意，這將返回一個字符串值。雖然JavaScript是鬆散類型的，並且在將字符串轉換爲數字時默默地嘗試做正確的事情，但並不總是正確的。你可能想用'+ ...'或'* 1'來轉換爲實數。 – Phrogz 2014-10-16 17:55:24

@Progro這是真的，這一切都取決於你如何使用它。在某些情況下，這將是足夠的，而在其他情況下，您的方法將會更好。 – blex 2014-10-16 18:13:32

你可以試試這個：

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註釋：請注意，邊界矩形將佔變換，其可能或可能不期望。

來源

2014-10-16 17:46:45

你的第一段代碼中的'el'是什麼？ – blex 2014-10-16 17:47:47

@blex這是一個錯字。我修好了它。 – 2014-10-16 17:53:10

注意，邊界矩形將佔變換，其可能或可能不期望。 – Phrogz 2014-10-16 17:54:34

的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

來源

2014-10-16 17:52:56 Phrogz

獲取寬度或高度SVG矩形的JavaScript

回答

相關問題