I'm trying to make a very simple modification of a circle SVG. The script code should change the radius of the circle, but nothing seems to happen. (using the same format, I am able to change the color but none of the other elements of the circle).
<!DOCTYPE html>
<html>
<body>
<svg xmlns="">
<circle cx="100" cy="100" r="50" fill="red" id="cir"/>
</svg>
<script>
document.getElementById("cir").r = 2000;
</script>
</body>
</html>
I'm trying to make a very simple modification of a circle SVG. The script code should change the radius of the circle, but nothing seems to happen. (using the same format, I am able to change the color but none of the other elements of the circle).
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red" id="cir"/>
</svg>
<script>
document.getElementById("cir").r = 2000;
</script>
</body>
</html>
1 Answer
Reset to default 17"r" is no property of the element, it's an attribute. Use this:
document.getElementById("cir").setAttribute("r", 2000);