元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

SVG

【SVG】テキスト要素の生成と追加

SVG

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

【SVG】要素の追加と削除

SVG

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

【SVG】特定の要素の取得

SVG

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

【SVG】テキストオブジェクト

SVG

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

【SVG】イベントを介した属性値の取得・設定

SVG

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

【SVG】イベントオブジェクト

SVG

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

【SVG】イベント

SVG

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

【SVG】スクリプトの基礎

SVG

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

【SVG】CSSの記述

SVG

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

【SVG】アニメーション3(パスに沿った移動)

SVG

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

【SVG】アニメーション2(座標系の変換)

SVG

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

【SVG】アニメーション1(属性値の変化)

SVG

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

【SVG】線の形状

SVG

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

【SVG】座標系の変換:transform

SVG

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

【SVG】テキスト

SVG

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

【SVG】パス

SVG

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

【SVG】基本形状の描画

SVG

基本形状の描画について書きます。「長方形」「円」「楕円」「直線」「折れ線」「多角形」の基本的な書き方を見ていきます。基本形状を組み合わせることで、様々な図形を作成することができます。 基本形状の種類 rect:長方形の記述と属性 circle:円の記述と…

【SVG】SVGの基礎

SVG

SVGの基礎として「ひな型ファイル」「座標系」「色の指定」「グループ」「リンク」についてご紹介します。まずは、ひな型となるファイルを作成します。次に、座標系や色の指定などの基本を理解します。そして、グループとリンクについて知っていきます。 SVG…

【SVG】SVGについて

SVG

画像形式のひとつである「SVG」について書きます。SVGは、Webで使える画像形式です。使いどころは限られてしまうかもしれませんが、技術のひとつとして触れていきたいと思います。アニメーションを指定できるので、どのような表現ができるのか探っていきたい…