content3.svg

<?xml version="1.0" standalone="no"?>
<svg preserveAspectRatio="xMidYMid meet" 
        viewbox="0 0 176 208" width="176.0" height="208.0">

  <desc>A Simple example for SVG animation</desc>

  <rect fill="#c4e7ff" x="0" y="0" width="88" height="104"/>
  <rect fill="#c4e7ff" x="88" y="104" width="88" height="104"/>

  <circle cx="80" cy="60" r="10"
        fill="yellow" stroke="blue" stroke-width="10">
    <animate attributeName="x" attributeType="XML"
             begin="0s" dur="10s" fill="freeze" from="60" to="20" />
    <animate attributeName="y" attributeType="XML"
             begin="0s" dur="10s" fill="freeze" from="20" to="30" />
    <animate attributeName="r" attributeType="XML"
             begin="0s" dur="10s" fill="freeze" from="10" to="200" />   
    <animate attributeName="x" attributeType="XML"
             begin="10s" dur="20s" fill="freeze" from="20" to="60" />
    <animate attributeName="y" attributeType="XML"
             begin="10s" dur="20s" fill="freeze" from="30" to="20" />
    <animate attributeName="r" attributeType="XML"
             begin="10s" dur="20s" fill="freeze" from="200" to="10" />   
 <animate attributeName="x" attributeType="XML"
             begin="20s" dur="30s" fill="freeze" from="60" to="20" />
    <animate attributeName="y" attributeType="XML"
             begin="20s" dur="30s" fill="freeze" from="20" to="30" />
    <animate attributeName="r" attributeType="XML"
             begin="20s" dur="30s" fill="freeze" from="10" to="200" />   

</circle>

  <g transform="translate(10,50)" >
    <text id="TextElement" x="0" y="0"
          font-family="Verdana" font-size="8.0" visibility="hidden"  > 
      SVG!
      <set attributeName="visibility" attributeType="CSS" to="visible"
           begin="2s" dur="2s" fill="freeze" />
      <animateMotion path="M 0 0 L 80 40" 
           begin="2s" dur="2s" fill="freeze" />
      <animateColor attributeName="fill" attributeType="CSS"
           from="rgb(0,0,255)" to="rgb(128,0,0)"
           begin="2s" dur="2s" fill="freeze" />
      <animateTransform attributeName="transform" attributeType="XML"
           type="rotate" from="0" to="+360"
           begin="1s" dur="2s" fill="freeze" repeatCount="indefinite"/>
      <animateTransform attributeName="transform" attributeType="XML"
           type="scale" from="1" to="3" additive="sum"
           begin="2s" dur="2s" fill="freeze" />
    </text>
  </g>
</svg>