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


87

在HTML5中,元素可以存储在他们的名字开始与XML属性的任意元数据data-<p data-myid="123456">。这也是SVG规范的一部分吗?

实际上,该技术在很多地方都可以很好地适用于SVG文档。但是我想知道它是否属于官方SVG规范,因为该格式还很年轻,以至于浏览器之间仍然存在很多不兼容,尤其是在移动设备中。因此,在提交代码之前,我想知道我是否可以期望将来的浏览器能够支持此功能。

我从工作组邮件列表中发现了此消息,并表示他们“希望[他们]将支持”。这正式了吗?

Answers:


121

尽管其他答案在技术上都是正确的,但它们忽略了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指出这一点


7
等式的第三部分:el.getAttribute('mydata:id')获取附加到SVG元素的数据。(注意:如果您使用的是d3,则默认情况下将删除命名空间,而只是删除el.getAttribute('id')。)
ericsoco

2
这应该是公认的答案。SVG是XML的扩展,允许您使用来自不同名称空间的标签。
Melle 2016年

1
为什么命名空间必须自定义?为什么在文档中声明HTML5名称空间不足以data-*在SVG中使用?
Fabien Snauwaert'2

1
仅供参考,无论使用私有名称空间(例如<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名称空间,都不会在validateator.w3.org/check上进行验证(使用SVG 1.1),但是两者都可以在浏览器中正常工作。然后可以使用getAttributegetAttributeNS来获取数据。
Fabien Snauwaert'2


19

9

有一个更一般的机制。

svg支持desc可能包含来自其他名称空间的任意xml的元素。通过相关ID或refid属性从您自己的名称空间链接此元素的实例或子节点的实例。

这是规范(5.4)的相关部分


1
感谢您的指导。我应该推断SVG不正式支持data-属性吗?
Leopd

2
是不是desc为了方便获取?
matanster 2014年

@matt我不这么认为,至少是基于stabndard。
collapsar 2014年

1
@matt不一定。Afaik标准只会提及与任何渲染无关的注释的目的。这并不矛盾元素对目的的适用性。具体来说,有一篇博客文章讨论了如何将aria-labelledby属性和desc元素用作可访问的标签。MDN建议使用类似的用法。鉴于谷歌搜索结果的过多,对访问SVG的最佳做法可能是值得它自己的问题,
黑洞

1
@RockyRoad:并非如此-SVG规范明确允许此类属性(与之相对的HTML / XHTML则不允许)。还要注意,尽管您可以(不正确地)使用desc裂变元素来获取任意数据,但是从链接中可以很明显地看出(IMHO)这不是该desc元素的预期目的。并不是说您不应该这样做,只是有更好的方法。
约翰多多
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.