javascript svgタグをappendChild()しても表示されない（createElementNS()）

状況

useタグで設定した画像が表示されない

useが表示されるソース

let child = document.createElement('div');
child.innerHTML = '<svg><use xlink:href="xxxx"></use></svg>';

useが表示されないソース

let child_svg = document.createElement('svg');
child_svg.innerHTML = '<use xlink:href="xxxx"></use>';

let child = document.createElement('div');
child.appendChild(child_svg);

原因、対応

useタグが原因じゃなくsvgタグが原因らしい

createElementNS()を使う

let svgNS = "http://www.w3.org/2000/svg";
let xlinkNS = "http://www.w3.org/1999/xlink";
let child_svg = document.createElementNS(svgNS, 'svg');
child_svg.innerHTML = '<use xlink:href="xxxx">';

let child = document.createElement('div');
child.appendChild(child_svg);

createElementNS()を使う必要のあるタグの例

• <svg>
• <circle>
• <rect>
• <path>
• <polygon>
• <text>
• <g>
• <defs>
• <linearGradient>
• <radialGradient>

他にもuseタグの「xlink:href」に値をセットしたいないら「setAttribute()」じゃなく「setAttributeNS()」を使う必要がある…など色々としっておく必要があるっぽい
…少し調べたら…理解してまとめるのが面倒そう…ってコトで結論。頻繁にこんなコトしないだろうから、都度調べる…って感じでいく