我是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>
解决方法
您无法缩放顶级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
