javascript - 通过 JavaScript 附加到 TD 时不显示 SVG

Question

我有简单的 HTML:

<table>
  <tbody>
    <tr>
      <td id="mytd"></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

这是 JavaScript 代码:

var svg = document.createElement('SVG');
svg.setAttribute('width', '100');
svg.setAttribute('height', '100');    

var circle = document.createElement('CIRCLE');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '50');
circle.setAttribute('stroke', 'green');
circle.setAttribute('fill', 'green');

svg.appendChild(circle);

document.getElementById('mytd').appendChild(svg);

现在看来 SVG 已插入到我的 TD 中，但它的大小是 0x0，而不是我设置的 100x100。这是什么原因？

Answer 1

对于所有 svg 元素，您必须使用:

document.createElementNS('http://www.w3.org/2000/svg', tagName)

...而不是常规的 document.createElement。

---

演示片段

var ns = 'http://www.w3.org/2000/svg'

var svg = document.createElementNS(ns, 'svg');
svg.setAttribute('width', '100');
svg.setAttribute('height', '100');    

var circle = document.createElementNS(ns, 'circle');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '50');
circle.setAttribute('stroke', 'green');
circle.setAttribute('fill', 'green');

svg.appendChild(circle);

document.getElementById('mytd').appendChild(svg);

<table>
  <tbody>
    <tr>
      <td id="mytd"></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>