您可以在 SVG 的“文本”标签中添加“缩写”标签吗？

【问题标题】：Can you add an 'abbr' tag in a SVG 'text' tag?您可以在 SVG 的“文本”标签中添加“缩写”标签吗？
【发布时间】：2020-12-18 01:46:30
【问题描述】：

我想将 <abbr> 添加到 SVG 的 <text> 标记，最终结果类似于 <text><abbr title="Goals Per Match">GPM</abbr></text>。我没有运气，所以我想知道这只是我的实现还是 SVG 无法实现。

这是我目前的实现方式：

svg.append("text")
    .attr("id", "club_label")
    .attr("x", width / 2 + 5 )
    .attr("y", height )
    .attr("fill", "white")
    .style("text-anchor", "middle")
    .append("abbr")
    .attr("title", "Goals Per Match")
    .text("GPM");

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

SVG 中没有 <abbr> 元素。此外，SVG 不支持 title 属性。它有一个 <title> 元素。

所以 SVG 中的等价物如下：

text.abbr {
  text-decoration: underline dotted;
}

<svg>
  <text x="100" y="100" class="abbr">GPM<title>Goals Per Minute</title></text>
</svg>

请注意，text-decoration 的 dotted 修饰符不适用于所有浏览器。

【讨论】：

【解决方案2】：

<abbr> 元素是 HTML 元素而不是 SVG 元素。这是两组不同的元素。你不能把它们混在一起。 SVG 元素的完整列表在Mozilla Developer Network documentation。

【讨论】：