Question

我有以下SVG代码。要仅缩放圆圈，我必须缩放容器。我无法在SVG中缩放圆圈。

我可以访问circle元素，但为什么我不喜欢其他html元素？代码是缩放圈子还是容器？

<html>
<head>
    <script>
        function scale() {
            document.getElementById('container').setAttribute('currentScale', 1.5);
        }
    </script>
</head>
<body>
    <svg height="150" width="150" id="container">
        <circle cx="25" r="20" cy="20" fill="blue" id="circle"></circle>
    </svg>
    <button id="zoom" onclick="scale()">scale</button>
</body>
</html>

Answer 1

我从未尝试过扩展整个SVG（使用纯SVG转换属性）。但看起来你可以只扩展SVG中的每个元素。在这种情况下，您必须首先定位（选择）圈子，然后在其上调用setAttribute，将transform属性修改为scale(1.5,1.5)，如下所示：

function scale() {
  document.querySelector("#container > circle")
          .setAttribute('transform', 'scale(1.5,1.5)');    
}

这是Demo。请注意，您必须选择No Wrap - in <head>选项（在框架和扩展程序部分的右侧）。或者更好的是你应该在JS代码编辑器中附加点击处理程序（不作为HTML代码中的属性内联）。

Answer 2

这是使用JS扩展圆圈的一种方法：

演示：http://jsfiddle.net/hb4nnau0/1/

为方便起见，请为您的圈子添加transform属性，但不添加比例更改。（或者，您可以根据需要以编程方式添加此项。）
`

在事件处理程序中，修改此转换元素的比例：

var circle = document.querySelector('circle');   // Or however, e.g. by id
var scale = circle.transform.animVal.getItem(0); // The first transform
scale.setScale(4,3);                             // Modify the transform

在SVG中缩放一个圆圈

2 个答案:

演示：http://jsfiddle.net/hb4nnau0/1/