SVG Tutorial

attributeType
Voreinstellung: auto.
Mit dem Attribut attributeType geben Sie den Typ der Eigenschaft bzw. des Attributs an: der voreingestellte Wert auto bewirkt, dass der user agent selbst ermittelt ob es sich um eine CSS-Eigenschaft oder um ein XML-Attribut (SVG ist eine XML-basierte Sprache !) handelt. Die beiden anderen möglichen Werte für attributeType sind daher CSS und XML.

attributeName
Voreinstellung: keine.
Mit der Eigenschaft attributName legen Sie die Eigenschaft bzw. das Attribut im Zielelement fest, die verändert werden soll. Möglicher Wert ist eine der im Zielelement akzeptierten Eigenschaften bzw. Attribute.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>animAttributeAttrs</title>
<desc>Attribute/Eigenschaften für die Zielbestimmung</desc>
  <defs>
    <symbol id="smilie">
      <desc>ein Symbol-Smilie</desc>
      <circle cx="20" cy="20" r="15"
        fill="yellow" stroke="black" />
      <circle cx="15" cy="15" r="2"
        fill="black" stroke="black" />
      <circle cx="25" cy="15" r="2"
        fill="black" stroke="black" />
      <line x1="20" y1="18" x2="20" y2="23"
        stroke="black" stroke-width="2" />
      <path id="mund" d="M 13 30 A 5 3 0 0 1 27 30"
        stroke="black" fill="none" stroke-width="2" />
    </symbol>
  </defs>

  <use xlink:href="#smilie" transform="scale(5)" />
  <animate xlink:href="#mund"
    attributeType="XML" attributeName="d"
    begin="1" dur="4"
    from="M 13 30 A 5 3 0 0 1 27 30"
    to="M 13 26 A 5 3 0 0 0 27 26"
    fill="freeze" />
</svg>
      

Die Animation im obigen Beispiel wird durch die Veränderung der Pfadwerte eines Pfades "mund" erzeugt. Die y-Koordinaten der Start- und Endpunkte dieser elliptischen Bogenkurve werden verringert. Außerdem wird der Wert für die Zeichenrichtung auf 0 geändert, d.h. die Kurve wird jetzt entgegen dem Uhrzeigersinn gezeichnet.

Dieser Pfad mit der ID "mund" wird durch die Referenzierung im Attribut xlink:href, das im Element animate gesetzt wird, zum Zielelement der Animation.

Durch attributeName wird das Attribut d im Zielelement ausgewählt.
Mit attributeType wird die Art dieser Eigenschaft angegeben: XML. (d ist keine CSS-Eigenschaft, sondern gehört zum Sprachumfang von SVG. SVG basiert wiederum auf XML.) Es ist jedoch meist nicht notwendig dieses Attribut zu verwenden, da die Voreinstellung auto den Attributtyp eigenständig ermittelt.

Die Animation wird nach 1 Sekunde gestartet und läuft 4 Sekunden, wobei das Endbild der Animation am Bildschirm stehen bleibt .. Näheres dazu in den folgenden Unterkapiteln.