JavaScriptでSVGを動的に描画する方法

SVG要素の生成

HTML 要素はDocument.createElement()で生成できますが、HTML以外の要素の場合は、名前空間URIを持つ要素の生成Document.createElementNS()を使います。

SVG要素の生成例
const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
ポリゴン要素の生成例
const polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
ライン要素の生成例
const line = document.createElementNS('http://www.w3.org/2000/svg','line');

属性の追加

要素の生成をしたら、属性を追加します。
画面幅に合わせて座標を指定したい場合はlineは座標を％指定できたのですが、polygonは％指定が使えないので残念でした。座標位置に変数を使うと構文エラーで怒られて少しハマりました。

const svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
const polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');

SVG要素の属性追加例
svg.setAttribute('id','wipe');
svg.setAttribute('viewbox','0 0 100 100');
svg.setAttribute('preserveAspectRatio','none');

ポリゴン要素に属性追加例
const x1=0, y1=0, x2=10, y2=10, x3=20, y3=0;
polygon.setAttribute('points',x1+","+y1+" "+x2+","+y2+" "+x3+","+y3); 

SVGのDOMツリーにして、ページ内DOMに挿入

︙
SVGツリーをHTMLのDOMに挿入
svg.appendChild(polygon); //ポリゴンを追加して仮想SVGツリーに
document.getElementsByTagName('body').appendChild('svg'); //HTMLのDOMに挿入

110のポリゴンを使ったので、同じ要素はcloneNodeでコピーしたり、DocumentFragmentオブジェクトに纏めてHTMLのDOMに挿入するなどもしました。

おわりに

通常はファイルで読み込むか、インライン記述で十分なので、あまりJavaScriptで生成することは少ないです。過度なアニメーションはUIとして良くないので、今回みたいな方法は滅多に使うことはなさそうですが、せっかく調べたので覚えておきます。

次はCanvasやWebGLを触ってみたいと思います。