SVG学習 3日目「Javascriptで描画」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

SVGって単語の意味知ってますか?
 

Scalable Vector Graphics

 

の頭文字です。
 

拡大縮小できるベクターグラフィックという事なんですね。
 

これまでは、この技術はFlashが担っていたんですが、スマートフォンをはじめ、ブラウザアプリ全般でFlashを非対応するようになってきたのは、HTML5でSVG対応が決まって、もはやFlashのようなブラウザ標準ではなく、プラグインとしての要素は排除したかっのかもしれませんね。
 

Flash自体をHTML5で取り込む様な検討はされなかったんでしょうか?
一企業がライセンスを持っている状態だったので、それ自体が邪魔だったのかも・・・WEB業界の闇の様な感じなので、あまり掘り下げない方がいいかも・・・

Javascript描画ライブラリ

前回描画したものをjavascriptで描画してみます。
 

 

 


 

前回表示したものと同じ画面になっているのがわかります。

簡単解説

前回HTMLタグで記述したものをそのままjavascript関数にして引数で対応しています。
 

ただし、SVGをjavascriptでタグ作成する時の注意点として”createElement”ではうまく表示されないという事を知っておきましょう。
正しくは、”createElementNS”という命令を使わなければいけません。
NSは”NameSpace”の略のようです。
 

ソースコード内をみるとわかる様に、下記の様に記述する必要があります。
 

 

URL部分はおまじないだと思ってそのまま記述します。
 

他のrectやcircleなどのタグも同じくcreateElementNSを使って作成します。
 

属性値については、基本的にoptionとしてobjectで受け渡す事ですべてのシェイプを同じ様な形にしています。
ただし、poly系のpointsや、transformの箇所は少し癖がある書き方なので、細かな箇所を書き込みたい人は、w3cのリファレンスページをご覧ください。
 

リファレンスページ
https://triple-underscore.github.io/SVG11/index.html

次回予告

上記のソースコードをもう少し効率的にまとめるのと、テキストの書き込みや外部画像ファイルの取り込み表示にTRYしてみたいと思います。
 

ここまでできたら、表示系の部分に関してはまあまあ好きにいじれるようになると思いますよ。
 

そして、次回からはjavascriptでの処理を基本として行いますので、付いて来られなくなったという人がいたら、コメントで「ムズイやんけ!」とお知らせください。
 

でも、HTMLタグのみでよければ、他のサイトでわかりやすいページもいくつかありますよ。

過去のSVG記事

SVG学習 1日目「SVGの利点を再確認」
 

SVG学習 2日目「基本描画」
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です