Mega Code Archive

 

Categories / XML / SVG

 

Rectangles and Multiple Animation Effects

<?xml version="1.0" standalone="no"?> <!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">     <rect fill="red" stroke-width="1" stroke="blue"         x="300" y="100" width="300" height="100">     <animate attributeName="stroke" attributeType="XML"              begin="1s" dur="5s"              fill="freeze" from="blue" to="yellow"/>     <animate attributeName="stroke-width"              attributeType="XML"              begin="1s" dur="5s"              fill="freeze" from="1" to="40"/>     <animate attributeName="x" attributeType="XML"              begin="1s" dur="5s"              fill="freeze" from="300" to="100"/>     <animate attributeName="y" attributeType="XML"              begin="2s" dur="5s"              fill="freeze" from="100" to="50"/>     <animate attributeName="width" attributeType="XML"              begin="3s" dur="5s"              fill="freeze" from="300" to="500"/>     <animate attributeName="height" attributeType="XML"              begin="4s" dur="5s"              fill="freeze" from="100" to="300"/>   </rect> </svg>