document.createElementNS

时间 2020-01-25

标签 document.createelementns document createelementns 繁體版

原文原文链接

使用document.createElement建立svg元素时，会发现一个诡异的现象，svg元素没法在页面上显示，可是经过调试器，能够看到该svg元素的存在。html

例如：运行如下代码app

<body>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  id="svg"
>
  <defs>
    <marker
      id="markerArrow"
      markerWidth="10"
      markerHeight="10"
      refX="2"
      refY="6"
      orient="auto"
    >
      <path d="M2,2 L2,10 L10,6 L2,2" fill="rgba(207, 219, 230, 1)" />
    </marker>
  </defs>
</svg>
<script>
  const path = document.createElement("path");
  path.setAttribute("d", "M105,72 C105,100 105,100 173,100");
  path.setAttribute("fill", "none");
  path.setAttribute("stroke-width", "2px");
  path.setAttribute("stroke", "rgba(207, 219, 230, 1)");
  path.setAttribute("marker-end", "url(#markerArrow)");
  document.getElementById("svg").appendChild(path);
</script>
</body>

页面上没法显示path元素，可是可在调试器中看到该元素的存在。
svg

解决方法是用document.createElementNS代替document.createElement,由于XML是有命名空间的。url

const path = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "path"
);

document.createElementNS

document.createElementNS与document.createElement相似，也用于建立标签节点，只是它须要一个额外的命名空间URI做为参数。此命名空间用于标识该节点属于哪一种XML类型。spa

有效的命名空间URI调试

HTML： http://www.w3.org/1999/xhtml
SVG：http://www.w3.org/2000/svg
XBL：http://www.mozilla.org/xbl
XUL：http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

命名空间为何是必须的

一个xml文档可能包含多个软件模块的元素和属性，在不一样软件模块中使用相同名称的元素或属性，可能会致使识别和冲突问题，而xml命名空间能够解决该问题。code

结论

因此在svg中插入元素时，要使用document.createElementNS和setAttributeNS。即便使用setAttribute是生效的。xml

参考：
Document.createElementNS: What's the difference and why we need ithtm