使用JavaScript更改SVG对象的高度和宽度

Question

我想在按钮点击时更改 svg 对象的高度和宽度。我尝试过了，但不起作用：

function modify() {
    document.getElementById('circle1').style.height = "10px";
    document.getElementById('circle1').style.width = "10px";        
}

- akm

---

它有什么问题？ - Celeo

这是一个 SVG <rect id="cercle1" x="0" y="0" width="50" height="50" stroke-width="1" stroke="#0E0E0E" style="fill:red; stroke:black; stroke-width:2"; />。 - akm

Answer 1

在SVG中，<rect>元素的宽度和高度是属性而不是CSS属性，因此您需要编写：

document.getElementById('cercle1').setAttribute("height", "10px");

同样地，宽度也是如此。

- Robert Longson

---

谢谢，这很有帮助。但我想补充一下，应该使用“10”而不是“10px”，因为我们要设置元素属性的值，而不是CSS属性。或者我理解错了吗？ - domsson

长度属性中的10px与10是相同的。两种写法都是有效的，所以你是错的。 - Robert Longson