SVGStyleElement: title 屬性
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 中應用備用樣式表
- 開啟選單欄 (按
F10或點選Alt鍵) - 開啟 檢視 > 頁面樣式 子選單
- 根據名稱選擇樣式表。
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGStyleElement__title |
瀏覽器相容性
載入中…