如何调整SVG动画的大小？

Question

我坚持将svg动画的大小调整为页面的不同百分比.

我创建了一个圆圈,增加了它的大小,然后恢复正常:

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle id="myCircle" cx="600" cy="250" r="70" fill="yellow" stroke="green" stroke-width="5">
<animate attributeName="r" values="70; 140; 210; 140; 70" dur="10s" repeatCount="indefinite"/>
</circle>
</svg>

然后,当我改变svg的rea大小时,圆圈不会改变它的大小,也不会改变该区域内的位置.

我试图用CSS缩放动画,给像素体大小,然后以百分比为SVG分配一个区域:

body{
width: 1440px;
heigth: 990px
}

#mySVG{
width: 100%;
}

另外,我试图用javascript改变大小:

function resize(){
var svg = document.getElementById("mySVG");
        svg.style.width = window.innerWidht;
svg.style.height = window.innerHeight;
} 

他们都没有工作......想知道什么是最好的方法来扩展SVG动画不仅与这个圆圈,而且通常与SVG动画.

提前致谢.

Answer 1

您必须使用视图框来定义坐标空间.例如

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1"
 viewbox="0 0 1200 1200">

viewBox属性允许指定一组给定的图形拉伸以适合特定的容器元素.

viewBox属性的值是由空格和/或逗号分隔的四个数字min-x,min-y,width和height的列表,它们指定用户空间中应该映射到视口边界的矩形由给定元素建立,考虑属性preserveAspectRatio.

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1200 1200">
    <circle id="myCircle" cx="600" cy="250" r="70" fill="yellow" stroke="green" stroke-width="5">
        <animate attributeName="r" values="70; 140; 210; 140; 70" dur="10s" repeatCount="indefinite" />
    </circle>
</svg>

有用的SVG资源文章 @ CSS-Tricks.com

MDN链接