SVGMarkerElement.orientType — Eigenschaft · JavaScript-Referenz

Signatur

SVGMarkerElement.orientType

Beschreibung

Mit orientType fragen Sie ab, welche Art von Ausrichtung ein <marker>-Element hat. Sein Attribut orient bestimmt, wie ein Marker (z. B. eine Pfeilspitze) am Anfang, in der Mitte oder am Ende eines Pfads gedreht wird. Die Eigenschaft sagt Ihnen, ob der Browser die Drehung automatisch aus der Pfadrichtung berechnet oder ob ein fester Winkel gilt.

Zurückgegeben wird ein SVGAnimatedEnumeration-Objekt mit zwei Eigenschaften:

baseVal: der Wert, der im Attribut steht
animVal: der aktuelle Wert, falls gerade eine SMIL-Animation läuft

Beide Werte sind Zahlen und entsprechen diesen Konstanten von SVGMarkerElement:

SVG_MARKER_ORIENT_UNKNOWN (0): ein anderer Wert, z. B. auto-start-reverse aus SVG 2
SVG_MARKER_ORIENT_AUTO (1): orient="auto"
SVG_MARKER_ORIENT_ANGLE (2): ein Winkel, z. B. orient="45deg" oder orient="90"

Den eigentlichen Winkel liefert die Eigenschaft orientAngle. Beide Eigenschaften spiegeln dasselbe Attribut wider. Sie ändern die Ausrichtung am einfachsten mit setOrientToAuto(), setOrientToAngle() oder direkt mit setAttribute('orient', …).

Rückgabewert

Typ

SVGAnimatedEnumeration

Beschreibung

Objekt mit baseVal und animVal. Beide sind Zahlen: 0 (unbekannt), 1 (auto) oder 2 (Winkel).

Beispiele

Ausrichtungstyp eines Markers auslesen

document.body.insertAdjacentHTML('beforeend', `
  <svg width="200" height="100">
    <defs>
      <marker id="pfeil" orient="auto" markerWidth="10" markerHeight="10" refX="5" refY="5">
        <path d="M0,0 L10,5 L0,10 z" />
      </marker>
    </defs>
    <line x1="10" y1="50" x2="180" y2="50" stroke="black" marker-end="url(#pfeil)" />
  </svg>`);

const marker = document.getElementById('pfeil');
console.log(marker.orientType.baseVal);
console.log(marker.orientType.baseVal === SVGMarkerElement.SVG_MARKER_ORIENT_AUTO);

1 true

Typ lesbar ausgeben, inklusive Winkel

const beschreibeAusrichtung = (marker) => {
  switch (marker.orientType.baseVal) {
    case SVGMarkerElement.SVG_MARKER_ORIENT_AUTO:
      return 'automatisch (folgt dem Pfad)';
    case SVGMarkerElement.SVG_MARKER_ORIENT_ANGLE:
      return `fester Winkel: ${marker.orientAngle.baseVal.value}°`;
    default:
      return `anderer Wert: ${marker.getAttribute('orient')}`;
  }
};

const ns = 'http://www.w3.org/2000/svg';
const m = document.createElementNS(ns, 'marker');

m.setAttribute('orient', '45deg');
console.log(beschreibeAusrichtung(m));

m.setAttribute('orient', 'auto-start-reverse');
console.log(beschreibeAusrichtung(m));

fester Winkel: 45° anderer Wert: auto-start-reverse

Ausrichtung umschalten und Typ prüfen

const ns = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(ns, 'svg');
const marker = document.createElementNS(ns, 'marker');
svg.append(marker);

// Ohne orient-Attribut gilt der Standardwert 0 (ein Winkel)
console.log(marker.orientType.baseVal);

marker.setOrientToAuto();
console.log(marker.orientType.baseVal, marker.getAttribute('orient'));

const winkel = svg.createSVGAngle();
winkel.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG, 30);
marker.setOrientToAngle(winkel);
console.log(marker.orientType.baseVal);

2 1 auto 2

// Wichtig · Fallstricke

Nur lesend: Das Objekt, das orientType zurückgibt, können Sie nicht durch ein anderes ersetzen. Ändern Sie die Ausrichtung stattdessen über setOrientToAuto(), setOrientToAngle() oder setAttribute('orient', …).
Werte aus SVG 2: auto-start-reverse hat keine eigene Konstante. orientType liefert dafür SVG_MARKER_ORIENT_UNKNOWN (0). Lesen Sie in diesem Fall das Attribut direkt aus.
Standardwert: Hat ein Marker kein orient-Attribut, gilt der Winkel 0. orientType.baseVal ist dann 2 (Winkel), nicht 0.
Vergleiche: Vergleichen Sie mit den benannten Konstanten (z. B. SVGMarkerElement.SVG_MARKER_ORIENT_AUTO) statt mit festen Zahlen. Das ist lesbarer.
Browser-Unterstützung: Chrome, Firefox, Safari und Edge unterstützen die Eigenschaft seit Langem. Wie Browser auto-start-reverse auf orientType abbilden, war in älteren Versionen teilweise uneinheitlich.

Siehe auch

SVGMarkerElement SVGMarkerElement.orientAngle SVGMarkerElement.setOrientToAuto() SVGMarkerElement.setOrientToAngle() SVGAnimatedEnumeration SVGAngle ServiceWorkerRegistration.scope