Firefox中用querySelector通过属性查找SVG路径报错求助

我的代码在Chrome浏览器中运行正常，但在Firefox中通过querySelector按ElementName属性查找SVG内的path元素时，会抛出以下错误：

Uncaught TypeError: path is null
fillGradient texture.js:144
Texture texture.js:60
emit events.js:153
setListeners gradient.js:207

改用id查询path元素则能成功定位，问题出在跨浏览器对SVG自定义属性的处理差异上。

原代码 #

defs.appendChild(svgGradient);
const path = this.#svg.querySelector(`[ElementName="${this.#name}"]`);
path.setAttribute("fill", `url(#${gradientId})`);

问题原因 #

Firefox对SVG元素的自定义属性处理更严格：

• SVG属于XML命名空间，非标准自定义属性（如ElementName）在Firefox的querySelector中无法被正确识别
• Chrome对非标准属性做了兼容处理，而Firefox严格遵循XML规范，对属性名的标准性、大小写匹配要求更高

修正方案 #

改用HTML5标准的data-*自定义属性，确保跨浏览器兼容：

1. 将SVG path元素上的ElementName属性改为data-element-name
2. 同步修改querySelector的选择器语法

修正后的代码 #

defs.appendChild(svgGradient);
const path = this.#svg.querySelector(`[data-element-name="${this.#name}"]`);
path.setAttribute("fill", `url(#${gradientId})`);

如果必须保留原属性名，需确保SVG中path元素的ElementName属性名大小写与查询语句完全一致，但这种方式兼容性较差，不推荐。

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