Multiple Animation Effects
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg">
<g transform="translate(100,100)">
<text x="0" y="0" font-size="48" visibility="hidden"
stroke="black" stroke-width="2">
Animating Text
<set attributeName="visibility"
attributeType="CSS" to="visible"
begin="2s" dur="5s" fill="freeze"/>
<animateMotion path="M0,0 L50,150"
begin="2s" dur="5s" fill="freeze"/>
<animateColor attributeName="fill"
attributeType="CSS"
from="yellow" to="red"
begin="2s" dur="8s" fill="freeze"/>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate" from="-90" to="0"
begin="2s" dur="5s" fill="freeze"/>
</text>
</g>
</svg>
Related examples in the same category