Beispiel: 41, Transformationsanimation Download Bsp41

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Transformationsanimationen</title>
  <defs>
    <path fill="#FFFF00" stroke="#FFBB00" stroke-width="3" id="stern"
d="M 150 105 l 28 -50 l -58 0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"/>
    <g id="Auge">
      <path d="M100 100 a 7 12 0 1 1 10 0 a 20 20 0 0 0 -10 0" fill="white" stroke="#FFBB00"/>
      <path d="M102 99 a 3 10 0 1 1 6 0 a 20 20 0 0 0 -6 0" fill="black" stroke="black"/>
    </g>
  </defs>
  <rect x="0" y="0" width="300" height="300" fill="#000044">
    <animateColor attributeName="fill" attributeType="XML"
      from="#000044" to="#AAAAFF"
      begin="4s" dur="4s" fill="freeze" />
  </rect>
  <g id="Mond" transform="translate(70 120)">
  <g>
    <circle cx="0" cy="0" r="60" fill="#FFFF00" stroke="#FFBB00" stroke-width="3"/>
    <use xlink:href="#Auge" transform="rotate(-10) translate(-120 -110) "/>
    <use xlink:href="#Auge" transform="rotate(10) translate(90 -110) "/>
    <path d="M -40 20 c 20 4 20 20 40 20 c 20 0 20 -16 40 -20 c -10 2 -70 2 -80 0" fill="black" stroke="#FFBB00" />
    <animateMotion dur="4s" begin="4s" fill="freeze"
      calcMode="spline"
      keySplines="1 0 .8 .8"
      path="M 0 0 c 120 -100 300 250 300 300"/>
    <animateTransform dur="4s" begin="4s" fill="freeze"
      attributeName="transform" attributeType="XML"
      type="scale"
      keyTimes="0;0.6;1" values="1;0.8;0.3"/>

  </g>
  </g>
  <path fill="#FFFF00" stroke="#FFBB00" stroke-width="3"
      d="M 150 105 l 28 -50 l -58 0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
      transform="translate(240 230) scale(0.2) ">
    <animateColor attributeName="fill" attributeType="XML"
      from="#FFFF00" to="#FFFFEE"
      begin="0s" dur="1s" fill="remove"/>
    <animateColor attributeName="fill" attributeType="XML"
      from="#FFFF00" to="#FFFFEE"
      begin="3s" dur="1s" fill="remove"/>
  </path>
  <path fill="#FFFF00" stroke="#FFBB00" stroke-width="3"
      d="M 150 105 l 28 -50 l -58 0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
      transform="translate(70 240) scale(0.2) ">
    <animateColor attributeName="fill" attributeType="XML"
      from="#FFFF00" to="#FFFFEE"
      begin="1s" dur="1s" fill="remove"/>
    <animateColor attributeName="fill" attributeType="XML"
      from="#FFFF00" to="#FFFFEE"
      begin="4s" dur="1s" fill="remove"/>
  </path>
  <path fill="#FFFF00" stroke="#FFBB00" stroke-width="3"
      d="M 150 105 l 28 -50 l -58 0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
      transform="translate(220 100) scale(0.1) ">
    <animateColor attributeName="fill" attributeType="XML"
      from="#FFFF00" to="#FFFFEE"
      begin="0.5s" dur="1s" fill="remove"/>
    <animateColor attributeName="fill" attributeType="XML"
      from="#FFFF00" to="#FFFFEE"
      begin="1s" dur="1s" fill="remove"/>
  </path>
  <path fill="#FFFF00" stroke="#FFBB00" stroke-width="3"
      d="M 150 105 l 28 -50 l -58 0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
      transform="translate(250 20) scale(0.1) ">
    <animateColor attributeName="fill" attributeType="XML"
      from="#FFFF00" to="#FFFFEE"
      begin="0.8s" dur="1s" fill="remove"/>
    <animateColor attributeName="fill" attributeType="XML"
      from="#FFFF00" to="#FFFFEE"
      begin="2.8s" dur="1s" fill="remove"/>
  </path>
  <use xlink:href="#stern" transform="translate(260 80) scale(0.08) "/>
  <use xlink:href="#stern" transform="translate(10 250) scale(0.1) "/>
  <use xlink:href="#stern" transform="translate(240 180) scale(0.1) "/>
  <use xlink:href="#stern" transform="translate(150 200) scale(0.3) "/>
</svg>

< voriges Beispiel - nächtes Beispiel > Fenster schliessen