<discard>

begin

Der Auslöser, der das <discard>-Element aktiv werden lässt, woraufhin das zugehörige Element verworfen werden soll. Dies ist üblicherweise ein syncbase-value, der den Start oder das Ende einer anderen Animation angibt, ein offset-value, relativ zu dem Zeitpunkt, an dem die SVG-Datei in das DOM geladen wurde, oder ein event-value.

Werttyp: <begin-value-list>. Standardwert: 0; Animierbar: nein

href

Eine URL-Referenz für das Zielelement, das verworfen werden soll. Dies hat die gleichen Anforderungen wie href bei Animationselementen und kann ein weiteres <discard>-Element sein. Wenn nicht definiert, ist das Zielelement das unmittelbare übergeordnete Element des <discard>-Elements.

Beachten Sie, dass, wenn das Zielelement nicht Teil des aktuellen SVG-Dokument-Fragments ist, das Verwerfen davon abhängt, welche Zielsprache verwendet wird.

Standardwert: none; Animierbar: nein

Dieses Beispiel zeigt, wie das <discard>-Element mit einem Aktivierungspunkt verwendet werden kann, der auf dem Abschluss einer Animation basiert. Das verwendete SVG basiert auf Erik Dahlströms "Loading bar" SVG unter http://xn--dahlstrm-t4a.net/svg/smil/svgt12_discard.svg.

Das SVG definiert ein "Load complete" <text>-Element, das durch ein <g>-Element verborgen wird.

Das <rect> wird über eine Dauer von 4 Sekunden mit der Animation mit der ID "barAnim" zum Ende der Leiste animiert. Das <g>-Element enthält ein discard-Element, das durch den Abschluss der "barAnim"-Animation ausgelöst wird: <discard begin="barAnim.end" />. Wenn dies aktiviert wird, werden das <g>-Element und alle seine Inhalte aus dem DOM entfernt, wobei nur der Textblock mit der Anzeige "Load complete" übrig bleibt.

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 100 50">
  <text
    x="50"
    y="30"
    font-family="sans-serif"
    font-size="10px"
    text-anchor="middle"
    stroke="white"
    stroke-width="0.2">
    Load complete
  </text>
  <g>
    <rect
      rx="5"
      x="10"
      y="15"
      height="20"
      width="80"
      fill="white"
      stroke="black" />
    <rect fill="lime" rx="3" x="12" y="17" height="16.1" width="10">
      <animate id="barAnim" attributeName="width" to="76" dur="4s" />
    </rect>
    <text
      x="50"
      y="30"
      font-family="sans-serif"
      font-size="10px"
      text-anchor="middle"
      stroke="white"
      stroke-width="0.2">
      Loading...
    </text>
    <discard begin="barAnim.end" />
  </g>
</svg>

Ergebnis

Das unten stehende Live-Beispiel zeigt das obige SVG im oberen Bild an, während das zweite Bild die gleiche SVG-Datei, jedoch ohne die <discard>-Elemente zeigt (in Browsern, die das discard-Element nicht unterstützen, verhalten sich beide Bilder gleich).

Im oberen Bild (in Browsern, die das <discard>-Element unterstützen) verschwindet die Leiste und alles andere im <g>-Element, nachdem die Leiste das Ende erreicht hat und verworfen wurde, sodass nur der "Load complete"-Text angezeigt wird. Die untere Bild-Fortschrittsanzeige wird einfach in ihren ursprünglichen Zustand zurückversetzt, wenn die Animation abgeschlossen ist, und der "Load complete"-Text wird nie angezeigt.

<button id="reset" type="button">Reset</button>

const reload = document.querySelector("#reset");

reload.addEventListener("click", () => {
  window.location.reload(true);
});

<img
  src="bar_discard_event.svg"
  alt="Animated progress bar SVG that uses discard triggered on the end of an animation" />
<img
  src="bar_no_discard.svg"
  alt="Animated progress bar SVG that does not include discard element" />

Dieses Beispiel zeigt, wie das <discard>-Element mit einem Aktivierungspunkt verwendet werden kann, der auf Zeit basiert.

Es ist fast genau das gleiche wie das vorherige Beispiel, der Hauptunterschied besteht darin, dass das discard-Element nach 5 Sekunden (<discard begin="5s" />) anstelle des Endes der Animation (4 Sekunden) ausgelöst wird. Daher wird die ID aus dem <animate>-Element entfernt, da sie nicht verwendet wird.

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 100 50">
  <text
    x="50"
    y="30"
    font-family="sans-serif"
    font-size="10px"
    text-anchor="middle"
    stroke="white"
    stroke-width="0.2">
    Load complete
  </text>
  <g>
    <rect
      rx="5"
      x="10"
      y="15"
      height="20"
      width="80"
      fill="white"
      stroke="black" />
    <rect fill="lime" rx="3" x="12" y="17" height="16.1" width="10">
      <animate attributeName="width" to="76" dur="4s" />
    </rect>
    <text
      x="50"
      y="30"
      font-family="sans-serif"
      font-size="10px"
      text-anchor="middle"
      stroke="white"
      stroke-width="0.2">
      Loading...
    </text>
    <discard begin="5s" />
  </g>
</svg>

Ergebnis

Das unten stehende Live-Beispiel zeigt das obige SVG im oberen Bild an, während das zweite Bild die gleiche SVG-Datei, jedoch ohne die <discard>-Elemente zeigt (in Browsern, die das discard-Element nicht unterstützen, verhalten sich beide Bilder gleich).

Im oberen Bild (in Browsern, die das <discard>-Element unterstützen) wird die Leiste nach vier Sekunden bis zur Fertigstellung fortschreiten und dann auf ihren ursprünglichen Zustand zurückgesetzt. Eine Sekunde später wird alles im <g>-Element verschwinden, sodass nur der "Load complete"-Text angezeigt wird. Die untere Bild-Fortschrittsanzeige wird einfach in ihren ursprünglichen Zustand zurückversetzt, wenn die Animation abgeschlossen ist, und der "Load complete"-Text wird nie angezeigt.

<button id="reset" type="button">Reset</button>

const reload = document.querySelector("#reset");

reload.addEventListener("click", () => {
  window.location.reload(true);
});

<img
  src="bar_discard_time.svg"
  alt="Animated progress bar SVG that uses discard triggered on time" />
<img
  src="bar_no_discard.svg"
  alt="Animated progress bar SVG that does not include discard element" />