Multiple Animation Effects

---

Key Constructs

A line segment can be rotated with the following SVG snippet:

<g transform="translate(200,200)">   <line x1="0"   y1="0"      x2="100" y2="0"      style="stroke:green;stroke-width:4;">      <animateTransform attributeName="transform"                        attributeType="XML"                        type="rotate"                        from="0" to="360" dur="4s"/> </g>

Rotating a rectangle around its upper-left vertex can be done with the following SVG snippet:

<g transform="translate(150,150)">   <rect x="0" y="0"         width="100" height="50"         style="fill:red;stroke:green;stroke-width:4;">         <animateTransform attributeName="transform"                           attributeType="XML"                           type="rotate" fill="freeze"                           from="0" to="360" dur="4s"/>   </rect>   <ellipse cx="0" cy="0"            rx="4" ry="4"            style="fill:blue;stroke:none"/> </g>

Rotating a rectangle around its center can be handled with the following SVG snippet:

<g transform="translate(400,150)">  <rect x="-50" y="-25"        width="100" height="50"        style="fill:yellow;stroke:green;stroke-width:4;">        <animateTransform attributeName="transform"                          attributeType="XML"                          type="rotate" fill="freeze"                          from="0" to="360" dur="4s"/>  </rect>  <ellipse cx="0" cy="0"           rx="4" ry="4"           style="fill:blue;stroke:none"/> </g>

Simple scaling animation with a text string can be done with the following SVG snippet:

<g transform="translate(50,200)">  <text  x="0" y="0"        fill="green"        font-size="96">        <animateTransform attributeName="transform"                 attributeType="XML" type="scale"                 from="0" to="1"                 begin="0s" dur="4s"/>     Sample Text  </text> </g>

---