在线HTML编辑器 - BootWiki.com

<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect height="100" id="rec" style="fill:lime" width="300" x="300" y="100">
    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> 
    <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> 
    <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" /> 
    <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" /> 
    <animateColor attributeName="fill" attributeType="CSS" begin="2s" dur="4s" fill="freeze" from="lime" to="red" />
  </rect>
  <g transform="translate(100,100)"> 
    <text id="TextElement" style="font-family:Verdana;font-size:24; visibility:hidden" x="0" y="0"> It's SVG!
      <set attributeName="visibility" attributeType="CSS" begin="1s" dur="5s" fill="freeze" to="visible" />
      <animateMotion begin="1s" dur="5s" fill="freeze" path="M 0 0 L 100 100" />
      <animateColor attributeName="fill" attributeType="CSS" begin="1s" dur="5s" fill="freeze" from="red" to="blue" />
      <animateTransform attributeName="transform" attributeType="XML" begin="1s" dur="5s" fill="freeze" from="-30" to="0" type="rotate" />
      <animateTransform additive="sum" attributeName="transform" attributeType="XML" begin="1s" dur="5s" fill="freeze" from="1" to="3" type="scale" />
    </text> 
  </g>
</svg>

</body>
</html>