Question

我可以在javascript中获取对象svg的宽度并将值保存在变量中。这是我的对象

    <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代码中获取字符串。正如Phrogz提到的那样，您可能需要一个数字，或者实际值（可能不同）。如果是，请参阅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

Answer 4

如果您是动态创建rect的，则以下解决方案有效

var rect = document.createElementNS(svgns, "rect");
rect.setAttribute('width', '200px');
rect.setAttribute('height', '200px');
var width= rect.width.baseVal.value;
var height= rect.width.baseVal.value;

获取宽度或高度svg矩形javascript

4 个答案: