Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing properties of SVG circle in HTML5/JS

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>
like image 882
Kenneth Avatar asked Jul 29 '14 21:07

Kenneth


1 Answers

"r" is no property of the element, it's an attribute. Use this:

document.getElementById("cir").setAttribute("r", 2000);
like image 117
silverwind Avatar answered Sep 20 '22 04:09

silverwind