javascript 中的 SVG 缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30988785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG scaling in javascript
提问by user3284707
I am pretty new to SVG and I am stuck on how to scale a shape inside an SVG element.
我对 SVG 很陌生，我一直在研究如何在 SVG 元素内缩放形状。
Can someone explain to me why the following doesn't work? I would like to scale up the circle by 50%.
有人可以向我解释为什么以下不起作用吗？我想将圆圈扩大 50%。
Here is my jsfiddle with the example which doesn't scale the circle?
这是我的 jsfiddle 与不缩放圆圈的示例？
https://jsfiddle.net/q2buo2x7/
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>
采纳答案by Brennan
You can not scale the top-level svg object. To do so, you will need to change the viewBox.
您无法缩放顶级 svg 对象。为此，您需要更改 viewBox。
Where did you get the idea to use currentScaleas an attribute?
您是从哪里想到将其currentScale用作属性的？
To scale the circle you need to change its transformattribute:
要缩放圆圈，您需要更改其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>
Read more: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
阅读更多：https: //developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
回答by hvk
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)");
}
In IE zoomIn1, zoomIn2 and zoomIn3 will work.
在 IE zoomIn1 中，zoomIn2 和 zoomIn3 将起作用。
In Chrome zoomIn1 will do nothing, zoomIn2 will zoom the whole page and zoomIn3 will do what you want. So for your Microsoft Exam your answer is correct, but in real live: use the transformattribute as stated in zoomIn3.
在 Chrome zoomIn1 中什么都不做，zoomIn2 会缩放整个页面，而 zoomIn3 会做你想做的。因此，对于您的 Microsoft 考试，您的答案是正确的，但在现实生活中：使用transformzoomIn3 中所述的属性。
回答by Paul LeBeau
It depends what you mean by "scale up the circle". You can apply a transform as per Brennan's answer. That will scale up everything about the circle, such as its stroke size, fill, etc.
这取决于你所说的“扩大圆圈”的意思。您可以根据 Brennan 的回答应用转换。这将放大有关圆圈的所有内容，例如其笔触大小、填充等。
Or you can just increase the radius of the circle, if that's all you need:
或者你可以增加圆的半径，如果这就是你所需要的：
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>