Question

我想更改SVG的viewBox属性（放大到特定区域），我希望这个更改能够动画化。我可以使用角动画吗？

我根据用户点击SVG的位置动态计算新的viewBox值。

Answer 1

动态调整大小viewBox

的示例

调整viewBox大小的动画使用SVG命令：

<animate attributeName="viewBox" />

初始值：viewBox="200 200 2700 2700"
最终值为：viewBox =" 0 0 300 300 "

结果，用户查看窗口增加了9倍。

<animate  attributeName="viewBox"  begin="svg1.click+0.25s" values="200 200 2700 2700;0 0 300 300" dur="1.5s" fill="freeze"  restart="whenNotActive" />

当您点击svg窗口

时动画开始

＆＃13;

body {
padding:0;
margin:0;
}
svg text {
fill:white;
}

＆＃13;

<svg id="svg1" width="300" height="300" viewBox="200 200 2700 2700" style="border:1px solid grey;">
<text x="235" y="255" font-size="24" > Click me </text> 
<rect id="R1" x="0" y="0" width="100" height="100" fill="#5A9C6E" /> 
<rect id="R2" x="100" y="0" width="100" height="100" fill="#A8BF5A" />
<rect id="R3" x="200" y="0" width="100" height="100" fill="#FAC46E" />

<rect id="R4" x="0" y="100" width="100" height="100" fill="greenyellow" />
<rect id="R5" x="100" y="100" width="100" height="100" fill="#5A9C6E" />
<rect id="R6" x="200" y="100" width="100" height="100" fill="skyblue" />

<rect id="R7" x="0" y="200" width="100" height="100" fill="#FAC46E" />
<rect id="R8" x="100" y="200" width="100" height="100" fill="yellow" />
<rect id="R9" x="200" y="200" width="100" height="100" fill="#5A9C6E" />

<text x="35" y="55" font-size="24" > R1 </text>
<text x="135" y="55" font-size="24" > R2 </text>
<text x="235" y="55" font-size="24" > R3</text>

<text x="35" y="155" font-size="24" style="fill:grey;" > R4 </text>
<text x="135" y="155" font-size="24" > R5 </text>
<text x="235" y="155" font-size="24" > R6 </text> 

<text x="35" y="255" font-size="24" > R7 </text>
<text x="135" y="255" font-size="24" style="fill:grey;" > R8 </text>
<text x="235" y="255" font-size="24" > R9 </text>  

<animate  attributeName="viewBox"  begin="svg1.click+0.25s" values="200 200 2700 2700;0 0 300 300" dur="1.5s" fill="freeze"  restart="whenNotActive" />
 </svg>

＆＃13;

viewBox

的连续增加和减少的示例

＆＃13;

<style>
body {
padding:0;
margin:0;
}
svg text {
fill:white;
}
</style>

<svg id="svg1" width="300" height="300" viewBox="200 200 2700 2700" style="border:1px solid grey;">
<text x="235" y="255" font-size="24" > Click me </text> 
<rect id="R1" x="0" y="0" width="100" height="100" fill="#5A9C6E" /> 
<rect id="R2" x="100" y="0" width="100" height="100" fill="#A8BF5A" />
<rect id="R3" x="200" y="0" width="100" height="100" fill="#FAC46E" />

<rect id="R4" x="0" y="100" width="100" height="100" fill="greenyellow" />
<rect id="R5" x="100" y="100" width="100" height="100" fill="#5A9C6E" />
<rect id="R6" x="200" y="100" width="100" height="100" fill="skyblue" />

<rect id="R7" x="0" y="200" width="100" height="100" fill="#FAC46E" />
<rect id="R8" x="100" y="200" width="100" height="100" fill="yellow" />
<rect id="R9" x="200" y="200" width="100" height="100" fill="#5A9C6E" />

<text x="35" y="55" font-size="24" > R1 </text>
<text x="135" y="55" font-size="24" > R2 </text>
<text x="235" y="55" font-size="24" > R3</text>

<text x="35" y="155" font-size="24" style="fill:grey;" > R4 </text>
<text x="135" y="155" font-size="24" > R5 </text>
<text x="235" y="155" font-size="24" > R6 </text> 

<text x="35" y="255" font-size="24" > R7 </text>
<text x="135" y="255" font-size="24" style="fill:grey;" > R8 </text>
<text x="235" y="255" font-size="24" > R9 </text>  

<animate id="an1" attributeName="viewBox"  begin="svg1.click+0.25s" values="200 200 2700 2700;0 0 300 300" dur="4.5s" fill="freeze"  restart="whenNotActive" /> 
<animate id="an2" attributeName="viewBox"  begin="an1.end+2.25s" values="0 0 300 300;200 200 2700 2700" dur="2.5s" fill="freeze"  restart="whenNotActive" /> 

 </svg>

＆＃13;

Angular 5动画SVG viewBox

1 个答案: