SVG Tutorial

additive
Voreinstellung: replace.
Durch die Verwendung dieses Attributs mit dem, außer replace einzig möglichen Wert sum, haben Sie die Möglichkeit den Startwert der Animation additiv zu bestimmen.
Der Wert, der für den Startwert im Attribut from (oder in values) angegeben wird, ist normalerweise ein absoluter Wert. Wenn Sie allerdings additive mit dem Wert sum verwenden, wird der für from angegebene Wert, dem orginalen Wert der Eigenschaft oder des Attribus im Zielelement hinzuaddiert. Der Startwert wird also wie folgt berechnet:
Wert des Attributs im Zielelement + from-Wert.

accumulate
Voreinstellung: none.
Das Attribut accumulate akzeptiert ebenfalls nur 2 mögliche Werte. Die Voreinstellung none und den Wert sum. Das Attribut wird nur in Verbindung mit repeatCount oder repeatDur interpretiert.
Bei Verwendung des Werts sum wird der mit from festgelegte Startwert für jeden weiteren Durchlauf der Animation mit dem aktuellen Endwert addiert. Der Wert dieser Summe ist dann der Startwert den jeweils nächsten Duchlaufs.

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="460" height="300"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>animAdditonAttrs</title>
<desc>Weitere Attribute/Eigenschaften für Animationen</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:16px;
            fill:black;}
      circle {stroke:black;}
      line {stroke:black;}
    ]]>
    </style>
  </defs>
<!-- Animationen k4 bis k1 -->
  <circle id="k4" cx="260" cy="200" r="20"
    style="fill:limegreen;" />
  <animate xlink:href="#k4"
    attributeName="r"
    begin="k4.click" dur="4"
    from="20" to="50"
    restart="whenNotActive"
    fill="freeze"
    repeatCount="5"
    accumulate="sum" />

  <circle id="k3" cx="260" cy="80" r="20"
    style="fill:darkgoldenrod;"  />
  <animate xlink:href="#k3"
    attributeName="r"
    begin="k3.click" dur="4"
    from="0" to="10"
    restart="whenNotActive"
    fill="freeze"
    repeatCount="5"
    accumulate="sum" />

  <circle id="k2" cx="80" cy="200" r="20"
    style="fill:dimgray;"  />
  <animate xlink:href="#k2"
    attributeName="r"
    begin="k2.click" dur="4"
    from="20" to="50"
    restart="whenNotActive"
    fill="freeze"
    additive="sum" />

  <circle id="k1" cx="80" cy="80" r="20"
    style="fill:dodgerblue;"  />
  <animate xlink:href="#k1"
    attributeName="r"
    begin="k1.click" dur="4"
    from="20" to="50"
    restart="whenNotActive"
    fill="freeze" />

<!-- die Texte -->
  <text x="80" y="50"
    style="font-weight:bold;">k1
  </text>
  <text x="80" y="170"
    style="font-weight:bold;">k2
  </text>
  <text x="260" y="50"
    style="font-weight:bold;">k3
  </text>
  <text x="260" y="170"
    style="font-weight:bold;">k4
  </text>
  <text x="110" y="60">from 20
    <tspan x="110" dy="18">to 50</tspan>
  </text>
  <text x="110" y="180">from 20
    <tspan x="110" dy="18">to 50</tspan>
    <tspan x="110" dy="18">additive sum</tspan>
  </text>
  <text x="290" y="60">from 0
    <tspan x="290" dy="18">to 10</tspan>
    <tspan x="290" dy="18">repeatCount 5</tspan>
    <tspan x="290" dy="18">accumulate sum</tspan>
  </text>
  <text x="290" y="180">from 20
    <tspan x="290" dy="18">to 50</tspan>
    <tspan x="290" dy="18">repeatCount 5</tspan>
    <tspan x="290" dy="18">accumulate sum</tspan>
  </text>
  <text x="15" y="270">
    Klicken Sie in die Kreise, um die Animation zu starten.
  </text>
</svg>
      

Im obigen Beispiel sind 4 Kreise zu sehen, die jeweils auf Mausklick animiert werden. Die dabei berechneten Werte werden nachfolgendend für jede Animation aufgeführt.

Animation k1.

• Startwert des Radius: from 20
• Endwert des Radius: to 50

Animation k2 additive sum.

• Startwert des Radius: from 20 + r 20 = 40
• Endwert des Radius: to 50 + r 20 = 70

Animation k3 accumulate sum.

• Anzahl der Durchläufe: repeatCount 5
• Durchlauf 1:
• Startwert des Radius: from 0
• Endwert des Radius: to 10
• Durchlauf 2:
• Startwert des Radius: from 0 + aktueller Endwert 10 = 10
• Endwert des Radius: to 10 + aktueller Endwert 10 = 20
• Durchlauf 3:
• Startwert des Radius: from 0 + aktueller Endwert 20 = 20
• Endwert des Radius: to 10 + aktueller Endwert 20 = 30
• Durchlauf 4:
• Startwert des Radius: from 0 + aktueller Endwert 30 = 30
• Endwert des Radius: to 10 + aktueller Endwert 30 = 40
• Durchlauf 5:
• Startwert des Radius: from 0 + aktueller Endwert 40 = 40
• Endwert des Radius: to 10 + aktueller Endwert 40 = 50

Animation k4 accumulate sum.

• Anzahl der Durchläufe: repeatCount 5
• Durchlauf 1:
• Startwert des Radius: from 20
• Endwert des Radius: to 50
• Durchlauf 2:
• Startwert des Radius: from 20 + aktueller Endwert 50 = 70
• Endwert des Radius: to 50 + aktueller Endwert 50 = 100
• Durchlauf 3:
• Startwert des Radius: from 20 + aktueller Endwert 100 = 120
• Endwert des Radius: to 50 + aktueller Endwert 100 = 150
• Durchlauf 4:
• Startwert des Radius: from 20 + aktueller Endwert 150 = 170
• Endwert des Radius: to 50 + aktueller Endwert 150 = 200
• Durchlauf 5:
• Startwert des Radius: from 20 + aktueller Endwert 200 = 220
• Endwert des Radius: to 50 + aktueller Endwert 200 = 250