SVG 文档是不是支持自定义数据属性？

Posted 2023-02-21

【中文标题】SVG 文档是不是支持自定义数据属性？

【英文标题】：Do SVG docs support custom data- attributes?SVG 文档是否支持自定义数据属性？

【发布时间】：2013-03-10 01:38:20

【问题描述】：

在 html5 中，元素可以具有存储在 XML 属性中的任意元数据，其名称以 data- 开头，例如 <p data-myid="123456">。这也是 SVG 规范的一部分吗？

在实践中，这种技术在很多地方都适用于 SVG 文档。但是我想知道它是否是官方 SVG 规范的一部分，因为该格式足够年轻，浏览器之间仍然存在很多不兼容，尤其是在移动设备中。所以在提交代码之前，我想知道我是否可以期待未来的浏览器会支持这一点。

我从工作组邮件列表中发现this message 说他们“希望[他们] 会”支持它。这成为官方了吗？

【参考方案1】：

虽然其他答案在技术上是正确的，但它们忽略了 SVG 为data-* 提供替代机制的事实。包含 SVG allows any attribute and tag，只要它不与现有的冲突（换句话说：您应该使用命名空间）。

要使用这个（等效的）机制：

使用mydata:id 而不是data-myid，像这样：<p mydata:id="123456"> 确保在 SVG 开始标记中定义命名空间，如下所示：<svg xmlns:mydata="http://www.myexample.com/whatever">

---

编辑：SVG2，目前是 W3C 候选推荐（2018 年 10 月 4 日），将 support data- directly（没有命名空间，与 HTML 相同）。不过，要获得广泛的支持还需要一些时间。感谢@cvrebert 提供pointing this out。

【讨论】：

等式的第三部分：el.getAttribute('mydata:id') 获取附加到 SVG 元素的数据。 （注意：如果您使用的是 d3，默认情况下命名空间将被剥离，您只需 el.getAttribute('id')。）

这应该是公认的答案。 SVG 是 XML 的扩展，它允许您使用来自不同命名空间的标签。

为什么必须自定义命名空间？为什么在文档中声明 HTML5 命名空间不足以在 SVG 中使用 data-*？

仅供参考，无论是使用私有命名空间（例如：<svg xmlns="http://www.w3.org/2000/svg" xmlns:mydata="http://www.myexample.com/whatever"><text x="10" y="20" mydata:id="something">SVG</text></svg>）还是 xhtml 命名空间，都不会在 validator.w3.org/check（使用 SVG 1.1）上验证，但两者都可以在浏览器中工作。然后可以使用getAttribute 或getAttributeNS 来获取数据。

【参考方案2】：

data-* attribute 是 HTML5 的一部分。它不是通用的 XML 属性。

当前的 SVG W3C 建议是 SVG 1.1（从 2011-08 开始）。它不允许此属性，因为您可以检查attributes list。

same 是 SVG 2 Working Draft 的情况（从 2012 年 8 月开始）。 更新（2015 年）：似乎it’s intended 支持SVG 2 中的data-* 属性（目前仍是工作草案）。

【参考方案3】：

当前的 SVG2 草案正式支持 SVG 元素的data-* 属性。见：

w3c/svgwg commit 1cb4ee9: Added SVGElement.dataset and allowed data-* attributes on all SVG elements. ACTION-3694: Add "data-*" attributes notes to spec.（创建于：2015 年 1 月 15 日） RESOLUTION: We will reserve "data-*" attributes to be used in SVG content. The API for handling them is on Element.（来自 SVG WG Telecon，2015 年 1 月 15 日） https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html

【参考方案4】：

还有一个更通用的机制。

svg 支持desc 元素，这些元素可能包含来自其他命名空间的任意 xml。通过依赖 id 或 refid 属性从您自己的命名空间中链接此元素或子节点的实例。

this is the relevant part of the spec (5.4).

【讨论】：

感谢您的指点。我应该推断 SVG 不正式支持 data- 属性吗？

desc 不是为了便于访问吗？

@matt 我不这么认为，至少基于标准。

@matt 不一定。 Afaik 标准只会提到独立于任何渲染的注释的目的。这与元素对目的的适用性并不矛盾。具体来说，a blog post 讨论了使用 aria-labelledby 属性和 desc 元素作为可访问标签。 MDN 推荐类似的用法。鉴于谷歌搜索结果过多，可访问 svg 的最佳实践可能值得单独提出一个问题，

@RockyRoad: 不是真的 - SVG 规范明确允许这样的属性（与 HTML/XHTML 不一样）。另请注意，虽然您可以（错误地）将description 元素用于任意数据，但（恕我直言）从链接中很明显这不是desc 元素的预期目的。不是说你不应该这样做，只是说有更好的方法。