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は％指定が使えなかった。なのでpolygonはJavaScriptで画面幅を取得して計算した値を入れた。座標位置に変数を使うと構文エラーで怒られて少しハマった。
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に挿入するなどもしました。
おわりに
通常はファイルで読み込むか、インライン記述で十分なケースが多い。
今回の方法は使う機会は少なそうだが、せっかく調べたので覚えておく。
次はCanvasやWebGLを触ってみたい。