SVG scaling in javascript

Question

I am pretty new to SVG and I am stuck on how to scale a shape inside an SVG element.

Can someone explain to me why the following doesn't work? I would like to scale up the circle by 50%.

Here is my jsfiddle with the example which doesn't scale the circle?

https://jsfiddle.net/q2buo2x7/

<svg height="150" width="150" id="outer">
    <circle id="inner" cx="25" cy="20" r="20" fill="orange"/>
</svg>

<script>
    function zoom() {
        var outer = document.getElementById('outer');
        outer.setAttribute("currentScale", 1.5);
    }
    zoom();
</script>

Answer 1

You can not scale the top-level svg object. To do so, you will need to change the viewBox.

Where did you get the idea to use currentScale as an attribute?

To scale the circle you need to change its transform attribute:

<svg height="150" width="150" id="outer">
    <circle id="inner" cx="25" cy="20" r="20" fill="orange"/>
</svg>

<script>
    function zoom() {
        var circle = document.getElementById('inner');
        circle.setAttribute("transform", "scale(1.5)");
    }
    zoom();
</script>

Read more: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform