【发布时间】：2019-12-07 01:07:41
【问题描述】：
在 Chrome 和 FF 中，如果我运行这一行
SOME_SVG_NODE.setAttributeNS("http://example.com","ex:attr",1)
然后这一行：
SOME_SVG_NODE.setAttributeNS("http://example.com","ex:attr",2)
结果是：<node ex:attr="2">...
在 Safari 中，结果为：<node ex:attr="1" attr"2">...
在 Safari 中，如果我连续运行这两行，结果匹配 Chrome 和 FF...
我是否遗漏了什么或做一些不正常的事情？是否有某些原因连续调用 setAttributeNS 是模棱两可的，以至于不同的浏览器会以不同的方式解释它？
完整示例
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<g></g>
</svg>
<script type="text/javascript">
let g = document.querySelector("g")
g.setAttributeNS("http://example.com","ex:attr","1")
g.setAttributeNS("http://example.com","ex:attr","2")
console.log(g)
document.addEventListener("mousedown",e=>{
g.setAttributeNS("http://example.com","ex:attr","3")
console.log(g)
})
</script>
</body>
</html>【问题讨论】：
-
命名空间 url "example.com" 是什么？应该是：“w3.org/2000/svg”？你能用正确的 NS 运行同样的例子，然后看看问题是否仍然存在？
-
怕我不跟。据我了解，此条目 (developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeNS) 命名空间值可以是您想要的任何值 — 目的是为参数 2 中的属性名称提供唯一范围。命名空间中可以使用的内容是否有限制setAttributeNS 的参数？
-
此外，据我了解，svg 命名空间是用于 svg 属性的，当通过 setAttributeNS 定义 svg 属性时，您应该将命名空间参数设置为 null，例如
setAttributeNS("http://w3.org/2000/svg","transform",...)应该是setAttributeNS(null,"transform",...)，所以我不知道你为什么要使用带有 setAttributeNS 的实际 svg 命名空间。 -
说得通；）对不起，我自己只是在学习。是的，你是对的，在这个问题案例中也没关系
标签： javascript svg safari