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.

html
<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.

js
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:

  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 anhand ihrer Namen aus.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# __svg__SVGStyleElement__title

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
title

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support