在 Firefox 中带有属性的 querySelector 在 svg 中查找路径时出现错误

Question

我的代码在 Chrome 中运行良好，但在 Firefox 中运行不佳。

当我使用带有属性的 Firefox 的 querySelector 搜索路径元素时，会出现找不到路径的错误。

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

当我用 id 搜索路径时，我能够找到该路径。所以我怀疑 Firefox 中带有属性标签的查询不支持或者我犯了一个错误，有人可以纠正我吗？

以下是我收到的错误

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

this.#svg

包含 svg 标记，

#name

是所选部分的标识符。

Answer 1

运行快速测试，我发现 Chrome 和 Firefox 都将该属性解释为小写字母

elementname

。

console.log(document.querySelector('svg').innerHTML);

<svg><path ElementName="foo" /></svg>

虽然 Chrome 可以使用任何大小写来查询元素，但 Firefox 需要严格匹配

const svg = document.querySelector('svg');
['ElementName', 'elementname', 'ElEmEnTnAmE'].forEach((attr) => {
  console.log(attr, svg.querySelector(`[${attr}]`) !== null);
});

<svg><path ElementName="foo" /></svg>

在 Chrome 中，这些都是

true

，但 Firefox 只匹配

elementname

。