。这也是 SVG 规范的一部分吗?在实践中,这种技术在很多地方都适用于 SVG 文档。但是我想知道它是否是官方 SVG 规范的一部分,因为该格式足够年轻,浏览器之间仍然存在很多不兼容,尤其是在移动设备中。因此,在提交代码之前,我想知道我是否可以期待......" /> 。这也是 SVG 规范的一部分吗?在实践中,这种技术在很多地方都适用于 SVG 文档。但是我想知道它是否是官方 SVG 规范的一部分,因为该格式足够年轻,浏览器之间仍然存在很多不兼容,尤其是在移动设备中。因此,在提交代码之前,我想知道我是否可以期待......"> 。这也是 SVG 规范的一部分吗?在实践中,这种技术在很多地方都适用于 SVG 文档。但是我想知道它是否是官方 SVG 规范的一部分,因为该格式足够年轻,浏览器之间仍然存在很多不兼容,尤其是在移动设备中。因此,在提交代码之前,我想知道我是否可以期待......" />
在 HTML5 中,元素可以将任意元数据存储在名称以 data-
开头的 XML 属性中,例如 <p data-myid="123456">
。这也是 SVG 规范的一部分吗?
在实践中,这种技术在很多地方都适用于 SVG 文档。但是我想知道它是否是官方 SVG 规范的一部分,因为该格式足够年轻,浏览器之间仍然存在很多不兼容,尤其是在移动设备中。因此,在提交代码之前,我想知道我是否可以期待未来的浏览器会支持这一点。
我从工作组邮件列表中发现 this message 说他们“希望 [他们] 会”支持它。这成为官方了吗?
虽然其他答案在技术上是正确的,但它们忽略了 SVG 为 data-*
提供替代机制的事实。要包含的 SVG allows any attribute and tag,只要它不与现有的冲突(换句话说:您应该使用命名空间)。
要使用此(等效)机制:
使用 mydata:id 代替 data-myid,像这样:
确保在 SVG 开始标记中定义命名空间,如下所示:
编辑: SVG2,目前是 W3C 候选推荐(2018 年 10 月 4 日),将support data-
directly(没有命名空间,与 HTML 相同)。不过,要获得广泛的支持还需要一些时间。感谢@cvrebert pointing this out。
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-*
属性(目前仍是工作草案)。
data-*
当前 SVG2 草案正式支持 SVG 元素的属性。看:
w3c/svgwg 提交 1cb4ee9:在所有 SVG 元素上添加了 SVGElement.dataset 和允许的 data-* 属性。
ACTION-3694:向规范添加“data-*”属性注释。 (创建于:2015 年 1 月 15 日)
解决方案:我们将保留“data-*”属性以用于 SVG 内容。处理它们的 API 在 Element 上。 (来自 SVG WG Telecon,2015 年 1 月 15 日)
https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html
有一个更通用的机制。
svg 支持可能包含来自其他命名空间的任意 xml 的 desc
元素。通过依赖 id 或 refid 属性从您自己的命名空间中链接此元素或子节点的实例。
this is the relevant part of the spec (5.4)。
data-
属性吗?
desc
不是为了便于访问吗?
aria-labelledby
属性和 desc 元素用作可访问标签。 MDN 推荐类似的用法。鉴于谷歌搜索结果过多,可访问 svg 的最佳实践可能值得单独提出一个问题,
desc
ription 元素用于任意数据,但(恕我直言)从链接中很明显这不是 desc
元素的预期用途。不是说你不应该这样做,只是说有更好的方法。
el.getAttribute('mydata:id')
获取附加到 SVG 元素的数据。 (注意:如果您使用 d3,默认情况下将剥离命名空间,您只需el.getAttribute('id')
。)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
来获取数据。