Масштабирование SVG в javascript

Я довольно новичок в SVG, и я застрял в том, как масштабировать фигуру внутри элемента SVG.

может кто-нибудь объяснить мне, почему следующее не работает? Я бы хотел увеличить круг на 50%.

вот мой jsfiddle с примером, который не масштабирует круг?

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>
7
html5 javascript svg

3 ответов

вы не можете масштабировать объект svg верхнего уровня. Для этого вам нужно будет изменить viewBox.

где вы взяли идею использовать currentScale как атрибут?

чтобы масштабировать круг, вам нужно изменить его :

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

Подробнее:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

5
    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)");
    }

в IE zoomIn1, zoomIn2 и zoomIn3 будет работать.

в Chrome zoomIn1 ничего не будет делать, zoomIn2 увеличит всю страницу, а zoomIn3 сделает то, что вы хотите. Поэтому для вашего экзамена Microsoft ваш ответ правильный, но в реальном времени: используйте transform атрибут, как указано в zoomIn3.

9

это зависит от того, что вы подразумеваете под "масштабированием круга". Вы можете применить преобразование в соответствии с ответом Бреннана. Это будет масштабировать все о круге,например, его размер штриха, заполнение и т. д.

или вы можете просто увеличить радиус круга, если это все, что вам нужно:

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