SVGStyleElement: title-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die SVGStyleElement.title
-Eigenschaft ist ein String, der dem title
-Attribut des gegebenen SVG-Style-Elements entspricht. Sie kann verwendet werden, um zwischen alternativen Stylesheets zu wählen.
Wert
Ein String mit beliebigem Wert.
Der Wert wird mit dem im entsprechenden Styles gegebene String im title
-Attribut initialisiert.
Beispiele
Dieses Beispiel zeigt, wie man die title
-Eigenschaft eines in einer SVG-Definition definierten Styles programmatisch abruft und setzt.
HTML
Das HTML enthält eine SVG-Definition für ein <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>
JavaScript
Der folgende Code ruft das style
-Element (ein SVGStyleElement
) über seinen Tag-Namen ab, protokolliert den Titel, ändert ihn dann und protokolliert 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}`;
Ergebnis
Der Text im untenstehenden Protokoll zeigt, dass der Titel zunächst das übereinstimmende Attribut am <style>
-Element widerspiegelt, aber dann 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:
- Öffnen Sie die Menüleiste (drücken Sie
F10
oder tippen Sie dieAlt
-Taste) - Öffnen Sie das Untermenü Ansicht > Seitenstil
- Wählen Sie die Stylesheets anhand ihrer Namen aus.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # __svg__SVGStyleElement__title |