Mega Code Archive

 

Categories / XML / SVG

 

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>