SVGStyleElement: title-Eigenschaft

Ein String mit beliebigem Wert.

Der Wert wird mit dem String initialisiert, der im entsprechenden title-Attribut des Styles angegeben ist.

Dieses Beispiel zeigt, wie man programmgesteuert die title-Eigenschaft eines Styles, der in einer SVG-Definition definiert wurde, auslesen und setzen kann.

Das HTML enthält eine SVG-Definition für einen <circle> mit einem <style>-Element, das ein title hat. Wir definieren auch ein Textfeld zum Protokollieren des aktuellen Titels.

<textarea id="log" rows="3" cols="50"></textarea>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <style title="gold fill style">
    circle {
      fill: gold;
    }
  </style>
  <circle cx="50" cy="40" r="25" />
</svg>

Der untenstehende Code erhält das style-Element (ein SVGStyleElement) über seinen Tag-Namen, protokolliert den Titel und ändert und protokolliert dann den Titel erneut.

const log = document.getElementById("log");

const svg = document.querySelector("svg");
const style = svg.querySelector("style");
log.value = `Initial title: ${style.title}\n`;
style.title = "Altered Title";
log.value += `New title: ${style.title}`;

Der Text im Protokoll unten zeigt, dass der Titel zunächst das entsprechende Attribut des <style>-Elements widerspiegelt, aber dann auf einen anderen Wert geändert werden kann.

Beachten Sie, dass alternative Styles nicht standardmäßig angewendet werden; sie müssen vom Benutzer als bevorzugtes Stylesheet ausgewählt werden. Um die alternativen Stylesheets in Firefox anzuwenden:

1. Öffnen Sie die Menüleiste (drücken Sie F10 oder tippen Sie auf die Alt-Taste)
2. Öffnen Sie das Ansicht > Seitendesign-Untermenü
3. Wählen Sie die Stylesheets basierend auf ihren Namen aus.