SVGMPathElement.href — Eigenschaft · JavaScript-Referenz

Signatur

SVGMPathElement.href

Beschreibung

Das SVG-Element <mpath> steht innerhalb von <animateMotion> und verweist auf ein <path>-Element, entlang dessen ein Objekt bewegt wird. Die Eigenschaft SVGMPathElement.href macht diesen Verweis per JavaScript zugänglich. Sie ist Teil der Mixin-Schnittstelle SVGURIReference.

Die Eigenschaft selbst ist nur lesbar. Sie gibt aber ein SVGAnimatedString-Objekt zurück, und dessen Eigenschaft baseVal ist beschreibbar. Wer baseVal setzt, ändert das zugrunde liegende href-Attribut. So lässt sich zur Laufzeit der Bewegungspfad einer Animation austauschen. animVal enthält den aktuell animierten Wert und ist nur lesbar.

Ist sowohl href als auch das veraltete xlink:href gesetzt, gewinnt href. Der Wert ist in der Regel eine Fragment-Referenz wie #bahn.

Rückgabewert

Typ

SVGAnimatedString

Beschreibung

Ein Objekt mit baseVal (beschreibbarer Attributwert, z. B. "#bahn") und animVal (nur lesbarer, aktuell animierter Wert).

Beispiele

Referenzierten Pfad auslesen

// <svg><path id="bahn" d="M10,80 Q95,10 180,80"/>
//   <circle r="5"><animateMotion dur="3s" repeatCount="indefinite">
//     <mpath href="#bahn"/></animateMotion></circle></svg>
const mpath = document.querySelector('mpath');
console.log(mpath.href.baseVal);
console.log(mpath.href.animVal);

#bahn #bahn

Bewegungspfad zur Laufzeit austauschen

const mpath = document.querySelector('animateMotion mpath');
const button = document.querySelector('#pfad-wechseln');

button.addEventListener('click', () => {
  const aktuell = mpath.href.baseVal;
  // baseVal ist beschreibbar, href selbst nicht
  mpath.href.baseVal = aktuell === '#bahn' ? '#kreis' : '#bahn';
  console.log('Neuer Pfad:', mpath.getAttribute('href'));
});

Neuer Pfad: #kreis

Zugehöriges path-Element auflösen

const findeBewegungspfad = (mpath) => {
  const ref = mpath.href.baseVal;
  if (!ref.startsWith('#')) return null;
  return document.getElementById(ref.slice(1));
};

const pfad = findeBewegungspfad(document.querySelector('mpath'));
console.log(pfad?.getTotalLength().toFixed(1));

199.3

// Wichtig · Fallstricke

Nur lesbar: mpath.href = '#x' hat keine Wirkung (im Strict Mode gibt es einen TypeError). Stattdessen mpath.href.baseVal setzen oder setAttribute('href', …) verwenden.
xlink:href ist seit SVG 2 veraltet. Verwende das einfache href. Ältere Safari-Versionen (vor 12) unterstützten bei SVG-Elementen nur xlink:href. Dafür setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', …) verwenden.
Verweist href nicht auf ein gültiges <path>, wird der <mpath>-Verweis ignoriert. Dann gelten das path-Attribut oder values/from/to von <animateMotion>.
Externe Verweise auf andere Dokumente (z. B. datei.svg#bahn) werden von den meisten Browsern nicht unterstützt.

Siehe auch

SVGMPathElement SVGAnimatedString SVGAnimateMotionElement SVGPathElement SVGUseElement.href CSSMathClamp.upper MathMLAnchorElement.search