Signatur
Beschreibung
SVGDiscardElement steht im DOM für das SVG-Element <discard>. Das Element kommt aus SVG Tiny 1.2 und wurde im Entwurf „SVG Animations Level 2“ aufgegriffen. Es sollte Speicher sparen: Zu einem bestimmten Zeitpunkt, den das Attribut begin festlegt, wird das Zielelement samt Kindern endgültig aus dem Dokument entfernt. Ohne href ist das Ziel das Elternelement. Der Anwendungsfall waren lange SMIL-Animationen, zum Beispiel Laufschriften oder Diashows, bei denen abgelaufene Teile nicht im Speicher bleiben sollen.
Die Schnittstelle definiert keine eigenen Eigenschaften oder Methoden. Alles erbt sie von SVGAnimationElement, zum Beispiel targetElement, getStartTime(), beginElement() und beginElementAt(). Außerdem erbt sie von SVGElement, Element, Node und EventTarget.
In der Praxis sollten Sie <discard> nicht mehr verwenden. Das Element steht nicht in SVG 2 und wird von den Browsern unterschiedlich unterstützt. Entfernen Sie Elemente lieber per JavaScript mit Element.remove(), zeitgesteuert über setTimeout(), über Animationsereignisse wie endEvent oder über die Web Animations API mit animation.finished.
Rückgabewert
<discard> im SVG oder durch document.createElementNS('http://www.w3.org/2000/svg', 'discard'). Einen öffentlichen Konstruktor gibt es nicht.Beispiele
Unterstützung im Browser prüfen
// Gibt es das Interface überhaupt?
const hatDiscard = typeof window.SVGDiscardElement === 'function';
// Erzeugt der Browser ein echtes SVGDiscardElement oder nur ein generisches SVGElement?
const el = document.createElementNS('http://www.w3.org/2000/svg', 'discard');
console.log('Interface vorhanden:', hatDiscard);
console.log('Klasse:', el.constructor.name);Deklaratives Entfernen per Markup (veraltet)
// SVG mit einem Hinweis, der nach 3 Sekunden verschwinden soll
document.body.insertAdjacentHTML('beforeend', `
<svg id="bühne" width="200" height="60" xmlns="http://www.w3.org/2000/svg">
<text id="hinweis" x="10" y="35">Willkommen!</text>
<discard href="#hinweis" begin="3s" />
</svg>`);
const discard = document.querySelector('#bühne discard');
console.log(discard instanceof (window.SVGDiscardElement ?? Object));
setTimeout(() => {
console.log('Hinweis noch vorhanden?', !!document.getElementById('hinweis'));
}, 3500);Robuste Alternative mit Fallback
// Entfernt ein SVG-Element nach 'ms' Millisekunden. Nutzt <discard>, falls vorhanden, sonst JavaScript.
const verwerfeNach = (ziel, ms) => {
if (typeof window.SVGDiscardElement === 'function') {
const d = document.createElementNS('http://www.w3.org/2000/svg', 'discard');
d.setAttribute('href', `#${ziel.id}`);
d.setAttribute('begin', `${ms}ms`);
ziel.ownerSVGElement.append(d);
} else {
setTimeout(() => ziel.remove(), ms);
}
};
const kreis = document.querySelector('svg circle#blase');
if (kreis) verwerfeNach(kreis, 2000);// Wichtig · Fallstricke
Veraltet und uneinheitlich unterstützt: <discard> steht nicht in SVG 2. Chromium-basierte Browser setzen das Element teilweise um. Firefox und Safari erzeugen stattdessen ein generisches SVGElement ohne Wirkung. Für neuen Code nicht verwenden.
- Das Entfernen ist endgültig. Wenn die Zeitleiste zurückspringt, etwa mit
setCurrentTime(), kommt das Element nicht zurück. beginbezieht sich auf die Dokument-Zeitleiste des SVG. Pausierte Animationen (pauseAnimations()) verzögern das Entfernen.- Ohne
hrefwird das Elternelement entfernt, nicht das<discard>selbst. Das führt leicht zu ungewollt verschwundenen Gruppen. - Prüfen Sie die Unterstützung immer über
typeof SVGDiscardElementoderconstructor.name. Ein erfolgreichescreateElementNS(…, 'discard')sagt nichts über die Unterstützung aus. - Referenzen im Code auf ein entferntes Zielelement bleiben erhalten. Zeigen solche Variablen noch auf das Element, gibt der Garbage Collector den Speicher nicht frei.