当ブログで紹介したSVGの記事をまとめました。SVGは、描画ソフトが無くても単純な図形ならコードを書くことで、簡単に作れます。ベクター画像なので、デバイスを気にすることなく表示できるのが良いです。記述ルールとアニメーションの仕方が分かれば、ある…

SVGは、ブラウザで表示して使うことを想定しています。今までの勉強で静止画(ロゴなど)は、問題なく扱えるようになったと思います。ここからは一歩踏み込んで、JavaScriptを含むSVGをHTMLに読み込ませる方法を勉強しました。 実現したいこと 現状 サンプルの…

素材サイトからダウンロードしたSVGの素材を再利用することを考えます。再利用できて、なおかつスタイルも適用できるように考えました。詳しくは、コードをご覧ください。 サンプルコードの紹介 symbol要素でひな形の定義 コード HTMLからの参照 コード デモ…

複数の図形が書かれているのに、1つのpath要素で構成しているSVGファイルがある場合があります。この状態ですと個別にスタイルを指定できません。そこで、path要素を分割します。 サンプルデータ(SVG) path要素を分割する 個別にスタイルを適用する スタイル…

SVGで図形をまとめて扱いたい場合がでてくると思います。そのようなときは、要素をグループにまとめます。関連する要素は、g要素、symbol要素、use要素、defs要素の4つです。これらについて見ていきます。 g要素 symbol要素 use要素 defs要素 参考サイト g要…

SVGでできる簡単なサンプルを書きます。今回は、クリッピングとイベントを組み合わせます。参考サイトで紹介しているSVGのサンプルを簡単に解説して、それを元に自分でも作ってみます。 X-ray meの簡易的な解説 クリッピングのサンプル コード デモ クリッピ…

SVGのクリッピングについて書きます。クリッピングは、切り抜きのことです。要素の一部分を切り抜きます。切り抜かれた部分は表示され、その他の部分は表示されません。切り抜く形は、色々と指定できます。 クリッピングパスの定義 クリッピングパスの適用 …

SVGでできる簡単なサンプルアニメーションを書きます。今回は、サークルのアニメーションです。参考サイトで紹介しているSVGのサンプルを、jQueryからJavaScriptに書き換えました。 サークルのアニメーション コード デモ 参考サイト サークルのアニメーショ…

単純な形のものでしたら、タグを使ってSVGデータを作ることができます。しかし、複雑な形状のものになると手書きのコードで作るのは現実的ではありません。そこで、ベクターデータを編集できるソフトを使い、SVGの素材を作る方法を見ていきます。 Illustrato…

ブラウザにSVGを表示・読み込む方法について書きます。何パターンかあるので、その時に合う方法を選べると良いです。 SVGタグ IMGタグ CSSのbackground-imageプロパティ objectタグ まとめ 参考サイト SVGタグ HTML内にSVGタグを挿入する方法です。 <svg version="1.1" width="300px" height="300px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <g> <circle cx="150" cy="75" r="10"/> </circle></g></svg>

SVGでできる簡単なサンプルアニメーションを書きます。今回は、円のアニメーションです。さらに柔軟な表現ができるように、JavaScriptと絡めていきます。SVGとJavaScriptで、表現の幅が広がることを感じられたら幸いです。 円のアニメーションのサンプル コ…

setInterval()を使ったアニメーションをご紹介します。一定間隔でアニメーションさせたいときに使います。時間を表示する例を見ていきます。 setInterval()の設定 デモ setInterval()の解除 デモ まとめ setInterval()の設定 setInterval(関数, 時間間隔); …

アニメーションの開始と終了の制御について書きます。アニメーションの開始と終了をクリックで操作する例を見ていきます。また、アニメーションイベント属性にスクリプトを設定する方法をご紹介します。 アニメーションの開始と終了 デモ アニメーションイベ…

イベントを処理する方法は、イベント属性の他にもあります。それは、要素にイベントリスナーを設定する方法です。イベントリスナーは、関数・メソッドを持っています。そこにイベントが発生した際の処理を記述します。イベントリスナーが持っている関数・メ…

テキスト要素の生成と追加について書きます。具体的な書き方は、サンプルコードを確認してください。 テキストオブジェクトの生成 デモ まとめ テキストオブジェクトの生成 document.createTextNode("テキスト"); テキストオブジェクトの追加の流れは以下の…

要素の追加と削除について書きます。サンプルとして、円の追加と削除の例を見ていきます。具体的な書き方は、サンプルコードを確認してください。 要素オブジェクトの生成と追加 デモ 要素の削除 デモ 補足:CDATAセクション まとめ 要素オブジェクトの生成と…

getElementByIdメソッドを使って、特定の要素を取得する方法を見ていきます。id属性を頼りに特定の要素を取得します。イベントが発生していない要素に対して、処理を設定することができます。 特定の要素の取得 まとめ 特定の要素の取得 要素のid属性に属性…

テキストオブジェクトの取得、テキストの取得・設定についてご紹介します。テキストオブジェクトを取得した後、テキストを操作していきます。予め設定してあるテキストをイベントを介して変更してみます。詳細は、サンプルコードをご確認ください。 テキスト…

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

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

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

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

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

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

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

SVGでは、アニメーションのための要素があります。今回は、そのひつとである「animate要素」について見ていきます。animate要素は、要素の属性値を変化させてアニメーションさせるものです。例えば、色や不透明度を変更してアニメーションさせます。 animate…

線の端点と接続点の形状を指定する属性があります。線の端の処理をどのようにするのかを指定できます。合わせて破線の指定の仕方を見ていきます。線の細部の扱いまで細かく指定できます。小さいことかもしれませんが、見た目の印象が変わります。 端点の形状…

要素が持つtransform属性に対して、変換を指定します。変換には「移動」「拡大・縮小」「回転」「剪断」があります。それぞれ、指定の仕方を見ていきます。 translation:移動 scale:拡大・縮小 rotate:回転 skew:剪断(せんだん) 変換の順序 まとめ translati…

SVGは、テキストを描画することもできます。図形とは違うテキスト特有の属性があり、それを使って装飾します。また、パスに沿ってテキストを配置することもできます。 text:テキストの記述と属性 テキストの装飾 tspan:テキストの一部分に対するスタイルの適…

SVGは、図形だけではなくパスも描画できます。パスを使ってより複雑な形状を描画することができます。パスは、コマンドを記述してパスデータを手動で作成します。しかし、イラレなどのソフトを使ってパスデータを作成する方が現実的です。 path:パスを描画す…