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 im SVG-Definitionsteil festgelegten Styles abrufen und setzen kann.

Der HTML-Inhalt enthält eine SVG-Definition für ein <circle> mit einem <style>-Element, das ein title-Attribut besitzt. Zusätzlich definieren wir ein Textfeld zur Protokollierung 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) durch seinen Tag-Namen, protokolliert den Titel, ändert dann den Titel und protokolliert ihn 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 untenstehenden Protokoll zeigt, dass der Titel anfangs das zum <style>-Element passende Attribut widerspiegelt, aber anschließend in einen anderen Wert geändert werden kann.

Beachten Sie, dass alternative Styles standardmäßig nicht 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 die Alt-Taste)
2. Öffnen Sie das Untermenü Ansicht > Seitenstil
3. Wählen Sie die Stylesheets basierend auf ihren Namen aus.