svgタグをJSで追加したときに、表示される場合とされない場合があります。

下記の2パターンのコードを使ったところ、１つ目の方法ではSVG画像が表示されず、2つ目では表示されます。
この違いはなんでしょうか？

JavaScript
1let svg = document.createElement('svg');
2let use = document.createElement('use');
3use.setAttribute('xlink:href', '/materials/logo.svg');
4svg.appendChild(use);
5
6//appendChildで要素を追加
7document.body.appendChild(svg);

JavaScript
1let svg = document.createElement('svg');
2let use = document.createElement('use');
3use.setAttribute('xlink:href', '/materials/logo.svg');
4svg.appendChild(use);
5
6let base = document.createElement('div');
7base.appendChild(svg);
8
9//HTMLを出力
10document.write(base.innerHTML);

chromeの開発者ウィンドウのElementsタブで確認すると、どちらも同じHTMLになっています。
このJavaScriptは、HTMLの読込中に実行されます。

HTML
1<html>
2  <head>...</head>
3  <body>
4    ...
5    <script>
6      //ここで上記のスクリプトを実行
7    </script>
8    ...
9  </body>
10</html>

行動規範の内容に同意します

回答2件

chromeの開発者ウィンドウのElementsタブで確認すると、どちらも同じHTMLになっています。

見た目は同じですが、名前空間が違います。

SVG関連のDOM要素は、document.createElementではなくdocument.createElementNSで名前空間のhttp://www.w3.org/2000/svgを指定して作らないと正常に動作しません。

（とはいえ、document.writeなどのようにいったんHTML文字列にしてブラウザに再解釈させる場合はブラウザが正しく扱ってくれます）

投稿2021/06/18 07:19

maisumakun

総合スコア145184

maisumakun

2021/06/18 07:34

もっとも、document.writeは使うべきでないのは間違いありません。

行動規範の内容に同意します

ベストアンサー

bodyの中のscriptで
document.bodyは確定していないので参照・編集できません
呼び出すタイミングを調整してください

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  let svg = document.createElement('svg');
3  let use = document.createElement('use');
4  use.setAttribute('xlink:href', '/materials/logo.svg');
5  svg.appendChild(use);
6  document.body.appendChild(svg);
7});