如何为SVG的path元素正确添加额外属性？禁止使用data-*属性

你已经找对了合规的核心方法——自定义XML命名空间，这是完全符合SVG/XML规范的做法，完美避开data-*属性的限制。结合你给出的SVG代码，具体细节如下：

1. 完成命名空间定义（你已经做了第一步） #

在根<svg>标签里声明自定义命名空间，格式是xmlns:前缀="唯一标识符"，其中的唯一标识符建议用你可控的URL（比如https://your-site.com/svg-custom-attrs，不需要这个URL真的能访问，只是用来保证命名空间的唯一性）。比如你的代码可以补充成：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xmlns:example="https://your-site.com/svg-custom-attrs">
  <path d="M10 10 L90 10 L90 90 L10 90 Z" example:id="123" example:display-state="visible" example:desc="这是一个矩形路径"/>
</svg>

2. 在path上添加自定义属性 #

直接用前缀:属性名="值"的格式添加，比如example:display-state="visible"用来控制显示状态，example:desc="xxx"存储描述信息，这些属性不会和SVG标准属性冲突，也不属于data-*系列。

3. 脚本中访问自定义属性 #

如果要在JS里读取或修改这些属性，用原生DOM的getAttributeNS()和setAttributeNS()方法：

// 获取path元素
const pathEl = document.querySelector('path');
// 读取自定义属性
const displayState = pathEl.getAttributeNS('https://your-site.com/svg-custom-attrs', 'display-state');
const desc = pathEl.getAttributeNS('https://your-site.com/svg-custom-attrs', 'desc');
// 修改自定义属性
pathEl.setAttributeNS('https://your-site.com/svg-custom-attrs', 'display-state', 'hidden');

如果用jQuery，直接通过带前缀的属性名操作即可：

const displayState = $('path').attr('example:display-state');
$('path').attr('example:display-state', 'hidden');

注意事项 #

• 命名空间的URL必须唯一，避免和其他库、框架或标准命名空间重复
• 自定义属性名可以根据需求自由命名，只要和前缀搭配使用就没问题
• 这种方式不会导致SVG文件解析错误，所有现代浏览器都能正确识别和处理

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