createElement() 无法处理基本路径元素

Question

首先，下面是没有添加任何 JavaScript 的预期结果

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  transform: scale( 2 );
  border-radius: 0.25rem;
  width: 100px;
  height: 100px;
  background-color: rgba( 95%,95%,95%,0.5 );
  fill: #444;
}

<svg>
  <path 
    d=
      "
       M10 50
       C20 30, 40 30, 50 50
       C60 70, 80 70, 90 50
      "
   ></path>
</svg>

注意 svg 和 path 元素以及 d 属性的值。在上面的代码片段中，一切都完美无缺。

但是，在下面的代码片段中，我们还没有创建 path 元素，因此我们尝试使用 JavaScript 插入它。在完成的程序中，d 属性将填充动态值。

为什么 path 元素不显示？

const svg = document.querySelector( `svg` ),
      path = document.createElement( `path` );

path.setAttribute(
  `d`,
  `
   M10 50
   C20 30, 40 30, 50 50
   C60 70, 80 70, 90 50  
  `
)

svg.appendChild( path );

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  transform: scale( 2 );
  border-radius: 0.25rem;
  width: 100px;
  height: 100px;
  background-color: rgba( 95%,95%,95%,0.5 );
  fill: #444;
}

<svg></svg>

更令人困惑的是，经过检查我们可以看到浏览器似乎已正确添加元素：

我们如何使用 JavaScript 让 path 元素正确出现在页面中？

Answer 1

将 createElementNS 与 SVG 命名空间一起使用 http://www.w3.org/2000/svg:

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

path.setAttribute(
  `d`,
  `
   M10 50
   C20 30, 40 30, 50 50
   C60 70, 80 70, 90 50  
  `
)

svg.appendChild( path );

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  transform: scale( 2 );
  border-radius: 0.25rem;
  width: 100px;
  height: 100px;
  background-color: rgba( 95%,95%,95%,0.5 );
  fill: #444;
}

<svg></svg>