javascript - JavaScript 中的 SVG 缩放

Question

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

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

在 IE zoomIn1 中，zoomIn2 和 zoomIn3 将起作用。

在 Chrome 中，zoomIn1 什么都不做，zoomIn2 将缩放整个页面，而 zoomIn3 将执行您想要的操作。因此，对于您的 Microsoft 考试，您的答案是正确的，但在现实生活中:使用 zoomIn3 中所述的 transform 属性。