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

    function zoomIn1() {
        var outer = document.getElementById("outer");
        outer.setAttribute("currentScale", 1.5);
    }
    function zoomIn2() {
        var outer = document.getElementById("outer");
        outer.currentScale = 1.5;
    }
    function zoomIn3() { // Correct way
        var inner = document.getElementById("inner");
        inner.setAttribute("transform", "scale(1.5)");
    }

In IE zoomIn1, zoomIn2 and zoomIn3 will work.

In Chrome zoomIn1 will do nothing, zoomIn2 will zoom the whole page and zoomIn3 will do what you want. So for your Microsoft Exam your answer is correct, but in real live: use the transform attribute as stated in zoomIn3.

Answer 2

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

Answer 3

It depends what you mean by "scale up the circle". You can apply a transform as per Brennan's answer. That will scale up everything about the circle, such as its stroke size, fill, etc.

Or you can just increase the radius of the circle, if that's all you need:

function zoom() {
    var inner = document.getElementById('inner');
    inner.r.baseVal.value *= 1.5;
}
zoom();

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