SVGStyleElement: title 屬性

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

SVGStyleElement.title 屬性是一個字串,對應於給定 SVG style 元素的 title 屬性。它可以用於在 備用樣式表 之間進行選擇。

任何值的字串。

該值根據 style 的 title 屬性中指定的字串進行初始化。

示例

此示例演示瞭如何以程式設計方式獲取和設定在 SVG 定義中定義的 style 上的 title 屬性。

HTML

HTML 包含一個 <circle> 的 SVG 定義,其中包含一個具有 title<style> 元素。我們還定義了一個用於記錄當前標題的文字區域。

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

下面的程式碼透過其標籤名獲取 style 元素(一個 SVGStyleElement),記錄其標題,然後再次更改並記錄其標題。

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}`;

結果

下方日誌中的文字顯示,標題最初反映了 <style> 元素上的匹配屬性,但隨後可以更改為其他值。

請注意,備用樣式表預設不應用;它們必須由使用者選擇為首選樣式表。要在 Firefox 中應用備用樣式表

  1. 開啟選單欄 (按 F10 或點選 Alt 鍵)
  2. 開啟 檢視 > 頁面樣式 子選單
  3. 根據名稱選擇樣式表。

規範

規範
Scalable Vector Graphics (SVG) 2
# __svg__SVGStyleElement__title

瀏覽器相容性