如何调整SVG动画的大小？

我被困在调整svg动画到页面的不同百分比。如何调整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的面积大小，圆不改变其大小也不是在这个区域内的位置。

我试图用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动画。

感谢高级。

来源

2015-02-05 user2095819

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

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

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

viewBox属性的值是四个数字分钟-X，分钟-Y，宽度和高度的列表，由空格和/或逗号分隔，其指定在用户空间中的矩形，其应该被映射到由给定元素建立的视口的边界，考虑到属性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 Resource Article @ CSS-Tricks.com

MDN Link

来源

2015-02-05 14:45:19

如何调整SVG动画的大小？

回答

相关问题