Beispiel: 42, Attributtransformation Download Bsp42

<?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="250" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Attributtransformation</title>
  <defs>
    <g id="auge">
      <ellipse cx="0" cy="0" rx="5" ry="10" fill="#EEEEEE" stroke="#AAAAAA" stroke-width="2"/>
      <ellipse cx="0" cy="3" rx="2" ry="4" fill="#AAAAAA" stroke="#AAAAAA" stroke-width="2"/>
    </g>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#0011FF"/>
  <g>
    <path stroke="#AAAAAA" fill="#FFFFFF" stroke-width="2"
         d="M0 100 c 20 0 0 -100 50 -100 s 30 100 50 100
           c -20 -0 -10 10 -20 10 s -10 -10 -20 0
           s -10 -10 -20 0 s -10 -10 -20 0
           s -10 -10 -20 -10"/>
    <use xlink:href="#auge" transform="translate(40 40)"/>
    <use xlink:href="#auge" transform="translate(60 40)"/>
    <ellipse cx="50" cy="67" rx="7" ry="10" fill="#888888" stroke="#AAAAAA" stroke-width="2"/>
    <animate attributeName="fill-opacity" attributeType="XML"
        begin="0s" dur="4s" fill="freeze" repeatDur="2:00"
        keyTimes="0;.1;.2;.3;.4;.5;.6;.7;.8;.9;1"
        values="0.4;.2;.5;.8;.6;.3;.8;.2;.6;.4;.7"/>
    <animate attributeName="stroke-opacity" attributeType="XML"
        begin="0s" dur="4s" fill="freeze" repeatDur="2:00"
        keyTimes="0;.1;..2;.3;.4;.5;.6;.7;.8;.9;1"
        values="0.4;.2;.5;.8;.6;.3;.8;.2;.6;.4;.7"/>

    <animateMotion path="M-100 60 c 100 -50 100 50 200 0 s100 50 200 0"
        begin="0s" dur="4s" repeatDur="2:00"/>
  </g>
</svg>

< voriges Beispiel - nächtes Beispiel > Fenster schliessen