SVGSVGElement.deselectAll() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.deselectAll()

Beschreibung

Die Methode deselectAll() gehört zum Interface SVGSVGElement, also zu einem <svg>-Element. Sie hebt alle ausgewählten Objekte auf. Dazu zählen markierte Textstellen in <text>-Elementen und Eingabefelder, sogenannte type-in bars. Die Methode erwartet keine Argumente und gibt nichts zurück.

Laut SVG-2-Spezifikation wirkt der Aufruf wie window.getSelection().removeAllRanges() auf das Dokument, zu dem das Element gehört. Er betrifft also die gesamte Auswahl im Dokument und nicht nur den Inhalt der jeweiligen SVG-Grafik. Das gilt auch bei SVG, das direkt in HTML eingebettet ist.

Typische Einsatzfälle sind interaktive SVG-Grafiken wie Diagramme, Editoren oder Spiele. Beim Ziehen oder Doppelklicken wird dort oft ungewollt Text markiert, und diese Markierung soll danach wieder verschwinden. Für neuen Code sollte man die Selection-API nutzen, weil sie standardisiert ist und überall funktioniert.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Textauswahl in einer SVG-Grafik aufheben

// Voraussetzung: <svg id="chart"> mit <text>-Elementen im Dokument
const svg = document.querySelector('#chart');

// Nutzer hat Text markiert, danach Auswahl entfernen
svg.deselectAll();

console.log(window.getSelection().rangeCount);

Nach dem Ziehen eines Elements die Markierung entfernen

const svg = document.querySelector('svg');
const knoten = svg.querySelector('#knoten');
let ziehen = false;

knoten.addEventListener('pointerdown', () => { ziehen = true; });

svg.addEventListener('pointermove', (event) => {
  if (!ziehen) return;
  const pt = new DOMPoint(event.clientX, event.clientY)
    .matrixTransform(svg.getScreenCTM().inverse());
  knoten.setAttribute('cx', pt.x);
  knoten.setAttribute('cy', pt.y);
});

svg.addEventListener('pointerup', () => {
  ziehen = false;
  // Beim Ziehen versehentlich markierten Text wieder abwählen
  svg.deselectAll();
});

Zukunftssicherer Aufruf mit Ersatzlösung

const auswahlAufheben = (svg) => {
  if (typeof svg.deselectAll === 'function') {
    svg.deselectAll();
  } else {
    // Standardisierter Weg über die Selection-API
    window.getSelection()?.removeAllRanges();
  }
};

auswahlAufheben(document.querySelector('svg'));
console.log(window.getSelection().toString() === '');

true

// Wichtig · Fallstricke

Veraltet: SVG 2 führt deselectAll() nur noch aus Kompatibilitätsgründen. Für neuen Code sollte man window.getSelection().removeAllRanges() verwenden.
Wirkung auf das ganze Dokument: Der Aufruf löscht die Auswahl im gesamten Dokument, auch markierten HTML-Text außerhalb des <svg>-Elements. Er lässt sich nicht auf einen Teilbaum beschränken.
Die Methode gibt es nur auf SVGSVGElement. Andere SVG-Elemente wie <g> oder <text> haben sie nicht.
Will man Markierungen von vornherein verhindern, statt sie nachträglich zu entfernen, ist CSS oft besser: user-select: none auf den betroffenen SVG-Elementen.
Browserunterstützung: Chromium-Browser, Firefox und Safari stellen die Methode bereit. Wegen des Veraltet-Status sollte man vor dem Aufruf prüfen, ob sie existiert.

Siehe auch

SVGSVGElement Selection Selection.selectAllChildren() StorageAccessHandle.revokeObjectURL() SVGSVGElement.getElementById()