SVGStyleElement：title 属性

SVGStyleElement.title 属性是一个字符串，对应于给定 SVG 样式元素的 title 属性。它可用于在 备用样式表之间进行选择。

值

任何值的字符串。

该值使用在相应样式的 title 属性中指定的字符串进行初始化。

示例

此示例演示了如何在 SVG 定义中定义的样式上以编程方式获取和设置 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. 根据名称选择样式表。

规范

规范
可缩放矢量图形 (SVG) 2
# __svg__SVGStyleElement__title

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。