Question

假设我有一个嵌入式svg：

<svg 
  width="5cm" 
  height="6cm"
  viewBox="0 0 5 6"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
...
  <a id="foo">...</a>
...
</svg>

我想使用#foo向.setAttributeNS()添加任意属性，但只提供属性名称（例如xlink:href）和值，而不是属性命名空间。

有没有办法查找名称所属的命名空间？似乎应该有，因为我可以硬编码<a xlink:href="...">并且它将解析为正确的命名空间，因此应该有一些我可以利用的范围。

对于xlink:href示例，我可以遍历#foo的祖先，直到找到svg的{{1}}属性，并将该值用于命名空间，但似乎应该更容易。

Answer 1

答案在W3规范中：使用lookupNamespaceURI。

Answer 2

使用正确的namespaceURI时，如果命名空间已经有前缀，那么DOM实现应该使用它。

var doc = (new DOMParser()).parseFromString(
    '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>',
    "application/xml");
doc.documentElement.setAttributeNS(
    "http://www.w3.org/1999/xlink",
    "href", "data:text/plain,yep");
console.log((new XMLSerializer()).serializeToString(doc));

>>> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:text/plain,yep"/>

除此之外，除了以某种方式遍历节点并自己解决之外，确实没有别的办法。

Answer 3

setAttribute会工作吗？它不需要命名空间。

https://developer.mozilla.org/en-US/docs/Web/API/element.setAttribute?redirectlocale=en-US&redirectslug=DOM%2Felement.setAttribute

或者您可以将null传递给setAttributeNS。

如何在当前范围中找出属性引用的命名空间？

3 个答案: