SVG animáció

Szerző: Sallai András
Copyright © 2011, Sallai András
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Egyszerű animáció

<?xml version="1.0"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="800" height="200">
 
    <line 	x1="10" 
		y1="10" 
		x2="10" 
		y2="100" 
		style="stroke:blue; stroke-width:2"
		>
         <animate attributeName="x1"
                  attributeType="XML"
                  from="10" to="800"
                  begin="2" dur="30"
                  fill="freeze" />
         <animate attributeName="x2"
                  attributeType="XML"
                  from="10" to="800"
                  begin="2" dur="30"
                  fill="freeze" />
    </line>
 
</svg>

Egymás után

<?xml version="1.0"?>
 
<!DOCTYPE svg PUBLIC "-//W3//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
<circle cx="100" cy="100" r="50" style="fill: purple;">
	<animate id="novel"
		 attributeName="r"
		 attributeType="XML"
		 from="50" to="80"
		 begin="1s" dur="3s"
		 fill="freeze"/>
	<animate attributeName="r"
		 attributeType="XML"
		 from="80" to="50"
		 begin="novel.end+1s" dur="3s"
		 fill="freeze"/>
</circle>
 
</svg>

Pulzálás

<svg xmlns= "http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1" width="200" height="200">
 
<circle cx="100" cy="100" r="50" style="fill: blue;">
	<animate id="novel"
		 attributeName="r"
		 attributeType="XML"
		 begin="1s" dur="3s"
                 values="50; 60; 70; 80; 70; 60; 50"
		 fill="freeze" 
                 repeatDur="indefinite"/>
 
</circle>
 
</svg>