SVG学習 7日目「イベント」

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

SVGを学習し始めて1週間になりますが、だいぶこなれてきました。
 

今ではSVGのみを使って簡単なHTMLサイトを構築できそうな勢いです。
 

難点はテキストの扱いが非常に苦手で、改行ポイントやレスポンシブデザインの対応などの座標計算などは
全ての要素に対してきちんと随時計算いなければいけないので、全てのサイトをコンバートできるかというとそうではないですが、利点としては、ページで使用するborderなどの罫線が割りかし柔軟なデザインで構築できそうです。
 

今回はよりインタラクティブなSVGを目指してイベント処理の扱いを学習してみます。

イベント一覧

svgはhtmlと同じdom構造のため、それぞれの要素に対して通常の要素イベントは、大体設置できるようです。
 

ちなみに、リファレンスページに書かれているのは以下の通りです。
 

【通常要素イベント】
onfocusin = “<anything>”
onfocusout = “<anything>”
onactivate = “<anything>”
onclick = “<anything>”
onmousedown = “<anything>”
onmouseup = “<anything>”
onmouseover = “<anything>”
onmousemove = “<anything>”
onmouseout = “<anything>”

 

そして、svgタグだけに記載できるのは、下記のイベント。
 

【svgタグ専用イベント】
onunload = “<anything>”
onabort = “<anything>”
onerror = “<anything>”
onresize = “<anything>”
onscroll = “<anything>”
onzoom = “<anything>”

 

また、アニメーション専用のイベントも用意されています。
 

【アニメーションタグ専用イベント】
onbegin = “<anything>”
onend = “<anything>”
onrepeat = “<anything>”

 

アニメーションの開始や終了タイミングを取得できるようですね。
 

コードで学習

svgタグ内にscriptタグを記載して、その関数を呼び出すというオーソドックスタイプでコーディングしてみました。
個別に管理できる利点はありますが、無名関数にできないデメリットがありますが、idやclassを割り当てなくてもダイレクトにイベント設置できるのは利点ですね。
 

クリックして拡大・縮小

 

表示されているオブジェクトをクリックすると、拡大したり縮小したりするようにイベント処理してみました。
ちなみに、拡縮状態をトグル対応するために、data-flg属性を付与して対応してます。
 

サンプル
 

 

マースオーバーしてアニメーションする

 

マウスがオブジェクトに重なった時に発生するイベントは非常に有意義です。
 

サンプル
 


 

コードで学習2

次はjsだけでsvgを構築し、イベント対応してみます。
svgの基本ライブラリは、過去記事のSVG学習 3日目「Javascriptで描画」からバージョンアップさせていますので、下記ライブラリを使ってください。
 

svgライブラリ

 

オブジェクトをマウスでドラッグして移動させる

ライブラリも長くなっているので、codepenに書いてembedしました。
 

サンプル
 

See the Pen svg – drag by YugetaKoji (@geta1972) on CodePen.


 

svgのtransform情報の取得とmatrix属性について

svgのそれぞれのシェイプのx,y座標やwidth,heightサイズなどを取得するのは、getAttributeで簡単に取得できますが、transform情報を取得するのは、少し手間がかかります。
 

文字列としてscale,translate,rotateなどを取得して、正規表現などで分解してもいいのですが、svgの座標記述などは複数の記述方法があり、なかなかめんどくさい作業になります。
 

そんな時に、matrixプロパティを取得して行う方法があるので、これを覚えておくと便利に値の取得ができます。
 

matrixのアクセス方法

エレメントのtransform属性の下にある”baseVal”の最初の配列にアクセスし、その直下にmatrixが存在します。

 

ここで取得できる情報がa~fまである事がわかります。
それぞれの情報は以下の通りです。
ちなみに、transformが設定されていない場合は、baseVal配列にはデータが無いため、それ以下は”undefined”になるので、事前に判定処理が必要です。
 

 

それぞれの値が細かく入っています。
座標を取得したい場合は、以下のような記述ですね。
 

参考

https://triple-underscore.github.io/SVG11/script.html#EventHandling

次回予告

次回はシェイプ情報の”PATH”をちゃんと学習できていなかったので、”PATH”を学習します。

過去のSVG記事

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

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

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

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

SVG学習 5日目「SVGアニメーション」

SVG学習 6日目「グループ」

Leave a Reply

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