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

Question

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

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

我从工作组邮件列表中发现了这条消息,称他们"期望[他们]会"支持它.这是官方的吗？

Answer 1

虽然其他答案在技术上是正确的,但它们省略了SVG为其提供替代机制的事实data-*.SVG 允许包含任何属性和标记,只要它不与现有属性和标记冲突(换句话说:您应该使用命名空间).

要使用此(等效)机制:

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

编辑: SVG2,目前W3C候选推荐(2018年10月4日),将直接支持data-(没有名称空间,与HTML相同).但是,在支持普及之前需要一些时间.谢谢@cvrebert 指出这一点.

等式的第三部分:`el.getAttribute('mydata:id')`用于获取附加到SVG元素的数据.(注意:如果您使用的是d3,默认情况下将删除命名空间,您只需要`el.getAttribute('id')`.) (6认同)
这应该是公认的答案。SVG是XML的扩展，允许您使用来自不同名称空间的标签。 (2认同)
仅供参考，是否使用私有命名空间（例如：`<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 命名空间，都不会在 https://validator.w3.org/check (使用 SVG 1.1），但两者都可以在浏览器中使用。然后可以使用`getAttribute` 或`getAttributeNS` 来获取数据。 (2认同)