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?

<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>

Please see this thorough answer: http://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container — kaaposc, Jun 22 '15 at 20:12
You might want to accept one of the answers which helped you the most. This helps the community better to focus on question having unaccepted answers . — RBT, Jun 28 '17 at 02:27

score 13 · Answer 1 · answered Nov 11 '15 at 22:18

    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.

Brennan · Accepted Answer · 2017-01-10T17:13:36.503

11

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

edited Jan 10 '17 at 17:13

answered Jun 22 '15 at 20:08

Brennan

5,632
2
17
24

2

I have recently failed my html5 CSS and JavaScript exam and this was a question I wasn't sure on. I can't remember the exacts but I remember currentScale was on one of the answers. I guess that wasn't the correct answer. – user3284707 Jun 22 '15 at 20:10
2

I remember one which had the inner.r = inner.r * 1.5, I have tried this and this also didn't work so I was a bit stumped. – user3284707 Jun 22 '15 at 20:12
http://samples.msdn.microsoft.com/workshop/samples/svg/zoomAndPan/zooming.html try this example with IE and with chrome, you will see that it only works with IE. This uses the currentScale on SVG level. – Tito Oct 21 '16 at 12:27
2

This is sad that this is IE specific.. Anyway, the question is here: https://www.briefmenow.org/microsoft/which-code-segment-should-you-insert-at-line-02-47/ – Dalibor Mar 21 '18 at 21:36
What if the element already has a transform attribute set? Does this overwrite? – Ulf Aslak Mar 17 '21 at 07:50
Yes, it will overwrite any existing transform – Brennan Mar 18 '21 at 18:21
FYI, this also scales the stroke and likely anything else in the SVG. – computercarguy Apr 21 '21 at 21:47

score 1 · Answer 3 · answered Jun 23 '15 at 05:59

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>

SVG scaling in javascript

3 Answers3