<discard>

begin

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

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

href

Ein URL-Verweis auf das Ziellelement, 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 Ziellelement das unmittelbare Elternteil des <discard> Elements.

Beachten Sie, dass wenn das Ziellelement nicht Teil des aktuellen SVG-Dokumentfragments ist, ob es verworfen wird oder nicht, von der Zielsprache abhängt.

Standardwert: none; Animierbar: nein

Dieses Beispiel zeigt, wie das <discard> Element mit einer Aktivierung, die durch das Ende einer Animation ausgelöst wird, verwendet werden könnte. 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 "Fertig geladen" <text>-Element, das von einem <g>-Element verborgen wird.

Das <rect> wird über eine Dauer von 4 Sekunden bis zum Ende der Leiste durch die Animation mit der ID "barAnim" 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, so dass nur der Textblock übrig bleibt, der "Fertig geladen" anzeigt.

<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 folgende Live-Beispiel zeigt das oben stehende SVG im oberen Bild, während das zweite Bild die gleiche SVG-Datei ist, jedoch mit den <discard> Elementen entfernt (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) verschwinden die Balken und alles im <g> Element, nachdem die Balken das Ende erreicht haben und verworfen werden, so dass nur der "Fertig geladen"-Text übrig bleibt. Der untere Bildfortschrittsbalken kehrt einfach in seinen Anfangszustand zurück, nachdem die Animation abgeschlossen ist, und der "Fertig geladen"-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 einer zeitbasierten Aktivierung verwendet werden kann.

Es ist fast identisch mit dem vorherigen 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. Dies entfernt auch die ID vom <animate> Element, 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 folgende Live-Beispiel zeigt das oben stehende SVG im oberen Bild, während das zweite Bild die gleiche SVG-Datei ist, jedoch mit den <discard> Elementen entfernt (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 fertiggestellt und kehrt dann in ihren Anfangszustand zurück. Eine Sekunde später verschwindet alles im <g> Element, so dass nur der "Fertig geladen"-Text übrig bleibt. Der untere Bildfortschrittsbalken kehrt einfach in seinen Anfangszustand zurück, nachdem die Animation abgeschlossen ist, und der "Fertig geladen"-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" />