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

您必须使用视框来定义坐标空间。 E.G。

<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。

＆＃13;

<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>

＆＃13;

有用的SVG Resource Article @ CSS-Tricks.com

MDN Link

如何调整SVG动画的大小？

1 个答案: