javascriptで動的にsvgを作成する時にハマった！

タナビーの高梨です。

javascriptで動的にsvgの図形を描画しようとしてハマったので備忘に記事にしておきます。

同じようにハマりそうになった方の参考になれば幸いです。

最初どうしたか

<path>を動的に描きたかったため、以下のようなコードを記述しました。

let elmSvg = document.createElement(‘svg’);
elmSvg.setAttribute(‘viewBox’, ‘0 0 100 100);
elmParent.appendChild(elmSvg);

elmPath = document.createElement(‘path’);
elmPath.setAttribute(‘d’, ‘～～～’);
elmSvg.appendChild(elmPath);

これだと何も描画されません。

結論

結論から言うと、createElement()を使ったのが間違いでした。

svg、pathともcreateElementNS()を使う必要があります。

正解は

let elmSvg = document.createElementNS(“http://www.w3.org/2000/svg”, ‘svg’);
elmSvg.setAttribute(‘viewBox’, ‘0 0 100 100);
elmParent.appendChild(elmSvg);

elmPath = document.createElementNS(“http://www.w3.org/2000/svg”, ‘path’);
elmPath.setAttribute(‘d’, ‘～～～’);
elmSvg.appendChild(elmPath);

今回はpathでしたが、おそらくcircle他、svgの子要素として記述する描画要素は全部そうだと思われます。

あがいたこと

最初の間違えたロジックでは、親要素のサイズにかかわらず、width、heightともゼロのsvgとpathがinlineでできてしまいます。

無理矢理displayをblockにしてwidthとheightを設定したところ、要素としては存在するもののやはり何も描画されません。

無理矢理widthやheightを与えてdisplayをblockにしてみたり、positionを変えたり、描画する親要素を変えたり、といろいろやってみたのですが一行に改善されません。

よく見るとsvgのviewBoxがviewboxと全て小文字になっており、何かおかしいと調べたところ、結論にたどりついた次第です。

まとめ

結論から書くと簡単な内容でしたが、正解にたどり着くまでにえらい無駄な時間をかけてしまいました。

同じような現象でお困りの際には参考にしてください。