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 |
浏览器兼容性
加载中…