SVG学習 4日目「テキストと画像ファイルの挿入」

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

svgを学習していて気が付いたんですが、canvasはflashのように表示内容からソースコードを追う事が難しいのですが、svgはタグが生成されるので、タグと属性をそのままコピーするだけで同じ表現が複製出来てしまうんですね。
 

ただ、アニメーションや、イベント効果など複雑な動作は、生成されるjavascriptを元にしなければいけないんですが、どちらにしても、webページと同じでソースコードは後追いが可能な技術なんですね。
 

もともとwebページでjavascriptを使うと言うことはどんだけ難読化しても隠しようがないので、それと同じであるのは変わりないのでさほど問題でもないんですが、難読化するぐらいなら、canvas使った方がいいという事なんでしょうね。
 

javascript簡易バージョン

前回書いたjavascript版のソースコードですが、もう少し簡単にする事ができたので、まずはそちらを載せておきますね。
 

 


 

表示も前回と同じである事がわかります。
 

ソースコードの行数が、前回は300行ぐらいあったのですが、今回は、88行という事で1/3以下に抑える事ができました。
 

ポイントは、シェイプのタグ別に作っていた関数を全て1つにまとめて記述してみました。
“shapes”という関数にまとめて書いているんですが、タグと属性をそのまま指定する仕様に変更しています。
 

そのためこれまで「stroke-width」はオブジェクトのネイティブkeyとして使えなかったので「strokeW」としていましたが、ダブルクォートを使って、「”stroke-width”:2」という風に指定するようにしました。
 

これにより、想定していない属性も、指定する事が可能になりました。
また、transformは深い階層になるので、なるべく配列で指定できるようにしていますが、そのまま”rotate”や”translate”,”scale”などを指定しても使えるようにしています。
 

何にせよ、これでかなり効率化が進んだので、他のsvgオブジェクトの学習に集中する事ができそうです。

テキストの扱い

svgは、テキストも要素として作成する事ができます。
座標などがコントロールできるので、必要な説明書きなどが表示可能です。
 

htmlでの記述は以下のように書きます。
 

 

上記ソースのjavascriptで記述する場合は、
 

 


 

非常にシンプルなので説明などはいらないと思いますが、js記述は、指定引数の3番目に文字列を入れるようにしてあります。
 

ただし、テキストの一部だけに別装飾をさせたい場合や、テキストの改行を入れる事ができないため、そうした場合は、別オブジェクトとしてテキストを生成する必要があります。
 

この辺が柔軟になるともっと便利に使えるのに・・・
 

一つ注意点として、テキスト表示する時のデフォルト状態では、y軸を0にすると、テキストが表示されません。
※指定座標の上に表示されているため、svgエリア外に表示されてしまいます。
 

これを回避するために、指定している”font-size”と同じ値をyに指定する事で文字が表示されます。
 

この辺がhtml要素と少し違和感がありますね。

外部画像ファイルの扱い

svgは、それだけでベクターでの画像生成が行えるのですが、外部のピクト画像(svgも可)なども読み込んで同じsvg内部で表示する事ができます。
 

グラフを作った時に、任意の位置にロゴやアイコンを設置したい場合に便利ですね。
 

html記述
 

 

javascript記述
 

 


 

先ほどのtextの下に表示してみました。
 

これも非常にシンプルなので、htmlタグが理解できていれば、難なく使えるでしょう。
 

サンプルで使用したpng形式以外でも、jpegもgifも使えるようです。

次回予告

svgアニメーションをしっかりと理解して、html装飾ができるようにがんばります!!!

過去のSVG記事

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

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

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

Leave a Reply

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