【SVG+JavaScript】SVG要素をDOMで追加【実験】
どうも！LSSです！！
↑先日、JavaScriptから要素を追加するDOMを試してみました。
innerHTMLを使うと「あたかも最初からそうHTMLを書いていたように」書き換えられる、という使い勝手の良さがありますが、それだと不都合なケースもあります。
（inputタグによる、ユーザー操作で変更されるものなどを含んだ場合とか）
で、そういえばSVGタグもHTMLと似たようなタグ構造を持っているので、そちらもDOM操作できるんじゃないか？と試してみました！
結論から言うと…「できるけどHTML要素をDOM操作する時とは少し違う点がある」という結果になりました。
実験成功例
コード
<svg id="gamen" xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 100 100" stroke="black" stroke-width="1" style="border: 1px solid black;">
<path d="M 100,0 L 0,100"></path>
</svg>
<script>
pt=document.createElementNS('http://www.w3.org/2000/svg','path');
pt.setAttributeNS(null,'d','M 0,0 L 100,100');
gamen.appendChild(pt);
</script>
viewbox="0 0 100 100"
横100、縦100の描画画面を用意しています。
style="border: 1px solid black;"
画面範囲が分かるように枠をつけています。
id="gamen"
このSVGタグの中に要素を追加する事になるので、操作対象となるようidをつけ、
<path d="M 100,0 L 0,100"></path>
100,0（右上の角にあたる座標）から、0,100（左下の角のあたる座標）まで線を引く<path>を最初から入れています。
そのSVGタグに対して、JavaScriptから、
pt=document.createElementNS('http://www.w3.org/2000/svg','path');
<path>タグを生成して、
pt.setAttributeNS(null,'d','M 0,0 L 100,100');
<path>タグ内のdオプションに「0,0（左上の角のあたる座標）から、100,100（右下の角にあたる座標）」まで線を引く、という指示をセットして、
gamen.appendChild(pt);
gamenというidをつけたSVGタグに、作ったpathタグを追加しています。
画像が×模様になっていたら成功です^^
失敗例
【JavaScript】DOM（DocumentObjectModel）を試してみます【実験】
で行ったHTML要素に対するDOM操作の要領で書くと、こういうコードになります。
コード（動作しません）
<svg id="gamen" xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 100 100" stroke="black" stroke-width="1" style="border: 1px solid black;">
<path d="M 100,0 L 0,100"></path>
</svg>
<script>
pt=document.createElement('path');
pt.d='M 0,0 L 100,100';
gamen.appendChild(pt);
</script>
が、これだとうんともすんとも動作しないんですね^^;
誤：document.createElement('path')
正：document.createElementNS('http://www.w3.org/2000/svg','path');
誤：pt.d='M 0,0 L 100,100';
正：pt.setAttributeNS(null,'d','M 0,0 L 100,100');
最後の「appendChild」はそのままですね。
SVGの場合、こういう少々面倒な書き方をしないといけないようです。
悪ノリしたサンプル（なにこれ）
ちぎり絵っぽくなりましたね^^
1000個の四角形（形も色もランダム、形がランダムなせいで三角になってることも）を、ランダムな位置に配置してみましたｗ
ランダムなので、画面を開くたびに模様は変わります。
コード
<svg id="gamen2" xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 100 100"></svg>
<script>
for(i=0;i<1000;i++){
tx=5+Math.random()*90;
ty=5+Math.random()*90;
pt=document.createElementNS('http://www.w3.org/2000/svg','path');
pt.setAttributeNS(null,'d','M '+(tx-Math.random()*5)+','+(ty-Math.random()*5)+' L '+(tx+Math.random()*5)+','+(ty-Math.random()*5)+' '+(tx+Math.random()*5)+','+(ty+Math.random()*5)+' '+(tx-Math.random()*5)+','+(ty+Math.random()*5)+' z');
pt.setAttributeNS(null,'fill','rgb('+Math.random()*256+','+Math.random()*256+','+Math.random()*256+')');
gamen2.appendChild(pt);
}
</script>
あとがき
今回は省略しましたが、はてなブログのHTML編集画面にコピペしてみたい方がおられましたら、svgタグの前後に[]をつける必要があります。
[]<svg id="gamen2" xmlns="http://www.w3.org/2000/svg" width="70%" viewbox="0 0 100 100"></svg>[]
こんな感じですね。
これで…結構「SVG+JavaScript」を自在に操れるようになった気がします^^
…凝った事をやろうとすると大変かもですがｗ
ところで…だいぶテキトーに作った「悪ノリサンプル」ですが、これはこれで何かに使えそうな気がしないでもないですね。
ブログの背景にするとか？ｗ（できるかどうかは不明）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
