在HTML5中,元素可以存储在他们的名字开始与XML属性的任意元数据data-
等<p data-myid="123456">
。这也是SVG规范的一部分吗?
实际上,该技术在很多地方都可以很好地适用于SVG文档。但是我想知道它是否属于官方SVG规范,因为该格式还很年轻,以至于浏览器之间仍然存在很多不兼容,尤其是在移动设备中。因此,在提交代码之前,我想知道我是否可以期望将来的浏览器能够支持此功能。
我从工作组邮件列表中发现了此消息,并表示他们“希望[他们]将支持”。这正式了吗?
Answers:
尽管其他答案在技术上都是正确的,但它们忽略了SVG为提供替代机制的事实data-*
。SVG允许包含任何属性和标签,只要它与现有属性和标签不冲突(换句话说:您应该使用名称空间)。
要使用这种(等效)机制:
mydata:id
代替data-myid
,如下所示:<p mydata:id="123456">
<svg xmlns:mydata="http://www.myexample.com/whatever">
编辑: SVG2(目前为W3C候选推荐书(2018年10月4日))将直接支持data-
(无命名空间,与HTML相同)。但是,要获得广泛支持还需要一些时间。感谢@cvrebert指出这一点。
data-*
在SVG中使用?
<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),但是两者都可以在浏览器中正常工作。然后可以使用getAttribute
或getAttributeNS
来获取数据。
data-*
当前SVG2草案中正式支持SVG元素上的属性。看到:
data-
属性吗?
desc
为了方便获取?
desc
裂变元素来获取任意数据,但是从链接中可以很明显地看出(IMHO)这不是该desc
元素的预期目的。并不是说您不应该这样做,只是有更好的方法。
el.getAttribute('mydata:id')
获取附加到SVG元素的数据。(注意:如果您使用的是d3,则默认情况下将删除命名空间,而只是删除el.getAttribute('id')
。)