イベントを介した属性値の取得・設定について書いています。それぞれ関数・メソッドに処理を記述します。記述は、サンプルコードを確認してください。 属性値の取得 属性値の設定 まとめ 属性値の取得 getAttributeNSメソッドを使い属性値を取得する。第一引…

イベントオブジェクトは、発生したイベントオブジェクトの情報を持っています。その情報を処理に利用することができます。ここでは、マウスポインタの座標を取得してコンソールに表示してみます。 イベントオブジェクト マウスポインタの座標の取得 要素オブ…

イベントの説明とイベント処理について書きました。イベント属性の種類を知り、スクリプトを設定する書き方についてご紹介します。ユーザの操作でイベント処理を実行することができるようになります。 イベントとは イベント属性 イベントハンドラ まとめ イ…

ブログを開設してから1年経つので、振り返りました。こんなブログもあるのだと思って見ていただけたら幸いです。 ブログ開設の理由 ブログ開設時のルール 苦労していること 記事にまとめる作業 インプット対象探し 裏テーマ ブログを数値で振り返る 課題・後…

スクリプトを書くと何かしらの処理が実行できます。まず、スクリプトの記述とスクリプトを別ファイルにして読み込む方法について書きます。スクリプトからSVGを操作できるようになるのが目標です。 SVGファイル内にスクリプトを記述する スクリプトファイル…

色や線などの属性をスタイルと呼びます。SVGのスタイルは、CSSとして記述することができます。スタイルの記述は、SVG文書から分離して別ファイルにすることができます。スタイルの記述と別ファイルの読み込みについて見ていきます。 CSSファイルの読み込み S…

JavaScriptの入門書はたくさんありますが、より詳しい内容となるとなかなか見つからないでいました。色々なサイトを参考に、中級者向けの参考書を探したところ「JavaScript本格入門」にだとり着きました。 本の要約 学んだこと 構文のさらなる理解 組み込み…

この記事では、クラスの追加・削除をすることでアニメーションする方法について書きます。イベントと組み合わせて、インタラクティブなものを作ります。簡単にではありますが、JavaScriptを利用したアニメーションの導入としてご覧ください。 JavaScriptでク…

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animateMotion要素」について見ていきます。animateMotion要素は、パスに沿って図形をアニメーションさせるものです。 animateMotion要素 パスの向きに応じた角度の変化 まとめ a…

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animateTransform要素」について見ていきます。animateTransform要素は、座標系を変化させることによってアニメーションさせるものです。 animateTransform要素 移動のアニメーシ…