将 svg 元素附加到 DOM 元素不显示

Question

我使用此代码生成 append 和 svg 元素和 DOM 元素。

var svg_el = document.createElement("svg");
svg_el.className = "symbol";
var use_el = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use_el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#my-symbol-icon');
// use_el.setAttribute('href', '#exp-col-icon');      // tried also this
svg_el.appendChild(use_el)

var element = document.getElementById("myElement");
element.appendChild(svg_el)

这就是我在检查 web 页面时看到我的 svg 元素的方式，但是它在视觉上并不存在。

<div id="myElement"><svg class="symbol"><use xlink:href="#my-symbol-icon"></use></svg></div>

如果我手动添加相同的确切代码，它可以按预期工作，但我需要使它与 JavaScript 一起工作。

Answer 1

这使得 svg 元件显示没有问题。

var svg_el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg_el.setAttribute('class',"symbol");
var use_el = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use_el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#my-symbol-icon');

var element = document.getElementById("myElement");
element.appendChild(svg_el)

我不确切知道为什么会这样，而有问题的代码似乎应该可以工作。