將 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)

我不確切知道為什么會這樣，而有問題的代碼似乎應該可以工作。