Question

我对SVG很陌生，我不知道如何在SVG元素中缩放形状。

有人可以向我解释为什么以下内容无效吗？我想把这个圈子放大50％。

这是我的jsfiddle以及没有缩放圆圈的例子吗？

<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属性。

Answer 2

您无法缩放顶级svg对象。为此，您需要更改viewBox。

您在哪里使用currentScale作为属性？

要缩放圈子，您需要更改其transform属性：

<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

Answer 3

这取决于你的意思＆＃34;扩大圈子＆＃34;。您可以按照Brennan的答案应用转换。这将扩大关于圆的所有内容，例如笔划大小，填充等。

或者你可以增加圆的半径，如果你需要的话：

＆＃13;

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

＆＃13;

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

＆＃13;

在javascript中进行SVG缩放

3 个答案: