SVGAngle.valueAsString — Eigenschaft · JavaScript-Referenz

Signatur

SVGAngle.valueAsString

Beschreibung

valueAsString ist die Textform eines SVGAngle-Objekts. Beim Lesen erhalten Sie Zahl und Einheit so, wie es unitType vorgibt, etwa "45deg". Ist keine Einheit angegeben (SVG_ANGLETYPE_UNSPECIFIED), kommt nur die Zahl zurück, z. B. "30".

Beim Schreiben wird die Zeichenkette ausgewertet. Danach enthalten value, valueInSpecifiedUnits und unitType die neuen Werte. Erlaubt sind die Einheiten deg, rad, grad oder gar keine Einheit (wird als Grad behandelt).

Ein SVGAngle erhalten Sie auf zwei Wegen:

als freies Objekt über SVGSVGElement.createSVGAngle()
über animierbare Attribute wie SVGMarkerElement.orientAngle.baseVal

Im zweiten Fall ändert ein Zuweisen an valueAsString direkt das zugehörige Attribut im DOM, hier orient. So können Sie Winkel samt Einheit bequem von Formularfeldern oder Konfigurationsdaten übernehmen, ohne sie vorher selbst in Zahl und Einheit zu zerlegen.

Rückgabewert

Typ

string

Beschreibung

Der Winkel als Zeichenkette in der Einheit aus unitType, z. B. "45deg". Die Eigenschaft kann gelesen und geschrieben werden.

Beispiele

Winkel mit Einheit setzen und auslesen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const angle = svg.createSVGAngle();

angle.valueAsString = '100grad';
console.log(angle.valueAsString);        // Textform
console.log(angle.unitType === SVGAngle.SVG_ANGLETYPE_GRAD);
console.log(angle.valueInSpecifiedUnits); // in Gon
console.log(angle.value);                 // immer in Grad

100grad true 100 90

Marker-Ausrichtung über orientAngle ändern

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

const orient = marker.orientAngle.baseVal;
console.log(orient.valueAsString);

// Neuen Winkel setzen – das Attribut wird mitgeändert
orient.valueAsString = '90deg';
console.log(marker.getAttribute('orient'));

30deg 90deg

Benutzereingabe prüfen und ungültige Werte abfangen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const angle = svg.createSVGAngle();

const setAngle = (input) => {
  try {
    angle.valueAsString = input.trim();
    return `OK: ${angle.valueAsString} = ${angle.value}°`;
  } catch (err) {
    return `Ungültig (${err.name}): "${input}"`;
  }
};

console.log(setAngle('45deg'));
console.log(setAngle('30'));
console.log(setAngle('viel'));

OK: 45deg = 45° OK: 30 = 30° Ungültig (SyntaxError): "viel"

// Wichtig · Fallstricke

Ungültige Werte: Wenn eine Zeichenkette nicht als Winkel gelesen werden kann, wird eine DOMException vom Typ SyntaxError ausgelöst. Ist das Objekt schreibgeschützt, etwa ein animVal, lautet der Typ NoModificationAllowedError. Umschließen Sie Zuweisungen aus Benutzereingaben deshalb mit try…catch.
Nur deg, rad und grad: Die CSS-Einheit turn gehört nicht zu den Einheiten von SVGAngle. Sie wird je nach Browser abgelehnt oder nicht richtig erkannt.
Genauigkeit: Die Zahlenwerte werden intern als 32-Bit-Gleitkommazahl (float) gespeichert. Bei rad können deshalb beim Zurücklesen Rundungsabweichungen auftreten. Prüfen Sie Winkel nicht mit exakten Vergleichen.
orient="auto": Bei Markern mit orient="auto" oder "auto-start-reverse" enthält orientAngle keinen sinnvollen Winkel. Fragen Sie vorher orientType ab.
Kompatibilität: Wird von allen modernen Browsern unterstützt. SVGAngle wird selten genutzt. Für einfache Fälle reichen oft setAttribute() oder CSS-Transformationen.

Siehe auch

SVGAngle SVGAngle.value SVGAngle.valueInSpecifiedUnits SVGAngle.unitType SVGAngle.newValueSpecifiedUnits() SVGAngle.convertToSpecifiedUnits() SVGSVGElement.createSVGAngle() SVGMarkerElement.orientAngle