。这也是 SVG 规范的一部分吗?在实践中,这种技术在很多地方都适用于 SVG 文档。但是我想知道它是否是官方 SVG 规范的一部分,因为该格式足够年轻,浏览器之间仍然存在很多不兼容,尤其是在移动设备中。因此,在提交代码之前,我想知道我是否可以期待......" /> 。这也是 SVG 规范的一部分吗?在实践中,这种技术在很多地方都适用于 SVG 文档。但是我想知道它是否是官方 SVG 规范的一部分,因为该格式足够年轻,浏览器之间仍然存在很多不兼容,尤其是在移动设备中。因此,在提交代码之前,我想知道我是否可以期待......"> 。这也是 SVG 规范的一部分吗?在实践中,这种技术在很多地方都适用于 SVG 文档。但是我想知道它是否是官方 SVG 规范的一部分,因为该格式足够年轻,浏览器之间仍然存在很多不兼容,尤其是在移动设备中。因此,在提交代码之前,我想知道我是否可以期待......" />
ChatGPT解决这个技术问题 Extra ChatGPT

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

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

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

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


j
johndodo

虽然其他答案在技术上是正确的,但它们忽略了 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


等式的第三部分: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),但两者都可以在浏览器中工作。然后可以使用 getAttributegetAttributeNS 来获取数据。
有没有办法让验证者高兴?来自“myexample.com/whatever”的响应是否必须是某些特定内容?
u
unor

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

当前的 SVG W3C 建议是 SVG 1.1(从 2011-08 开始)。它不允许此属性,因为您可以签入 attributes list

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


c
cvrebert

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


c
collapsar

有一个更通用的机制。

svg 支持可能包含来自其他命名空间的任意 xml 的 desc 元素。通过依赖 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 元素的预期用途。不是说你不应该这样做,只是说有更好的方法。