Angular 5 animate SVG viewBox

Question

I would like to change viewBox attribute of SVG (zoom in to specific area) and I would like this change to be animated. Can I do it using angular animations?

I calculate new viewBox value dynamically based on where user click on SVG.

Answer 1

Example of dynamic resizing viewBox

The animation for resizing the viewBox uses the SVG command:

<animate attributeName="viewBox" />

Initial value: viewBox="200 200 2700 2700"
The final value is: viewBox =" 0 0 300 300 "

As a result, the user viewing window is increased 9 times.

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

Animation starts when you click on svg window

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

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

Example of sequential increase and decrease of viewBox

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