嘿，刚好对SVG的自定义数据属性熟得很，来给你唠明白～你遇到的data-value其实是SVG里data-*系列自定义数据属性的一员，这类属性就是专门用来给SVG元素附加标准属性没法承载的自定义信息的，通常是为了脚本交互用的。

先把你查到的那段内容补全（应该是截断了）：

The data-* SVG attributes are called custom data attributes. They let SVG markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the SVGElement interface of the element the attributes belong to, with the SVGElement.dataset property.

下面给你拆解几个关键点：

• 核心用途：简单说就是给SVG元素“贴标签”存自定义数据——比如你想给一个SVG柱状图的柱子存它对应的数值、给图标存状态标识、给路径存业务ID，都可以用这类属性，不用额外搞隐藏元素或者全局变量，直接把数据绑在元素上，脚本里随时能拿到。
• 写法示例：在SVG标签里直接添加，格式必须是data-开头，后面跟你自定义的名称，比如：

<!-- 给SVG矩形绑定数值25和分类信息 -->
<rect x="20" y="20" width="60" height="100" data-value="25" data-category="季度销量" />

• 脚本操作方法：通过元素的dataset属性来读取或修改，JavaScript示例：

// 获取目标SVG元素
const bar = document.querySelector('rect');

// 读取data-value的值（注意返回的是字符串，需要数字的话转一下）
const salesValue = Number(bar.dataset.value); // 得到数字25

// 修改data-value的值
bar.dataset.value = "30";

这里要注意：dataset会自动去掉data-前缀，要是属性名有连字符（比如data-category），会转成驼峰命名（dataset.category）。

• *和HTML中data-的关系：其实SVG作为DOM的一部分，和HTML里的自定义数据属性规则完全一致——都是data-*格式，都通过dataset访问，只是一个用在HTML元素上，一个用在SVG元素上而已。

内容的提问来源于stack exchange，提问作者14wml