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を触ってみたいと思います。