【SVG】パス
パスとはこれまでの記事では、基本図形としてあらかじめ形の決まった図形を使用していきました。 パスは直線、円弧、曲線を組み合わせることで 1 つの図形を形成します。 パスは<path>要素を用い、直線などの組み合わせパターンをd属性で指定します。 dはdataの略です。 簡単ですが以下が一例になります。 <svg width="100" height="100"> <path d="M 10 20 L 50 10 L 30 70 Z" fill="none" stroke="black" /> <path d="M 90 80 L 60 80 L 70 50" fill="none" stroke="black" /> </svg> 例を見ていただくとわかる通り、MやLなどの記号を使用しています。 これらが直線や円弧などのパターンを表す記号となります。 記号の意味については以下より説明してい
HTML SVG の基本的な使い方（SVG入門）
HTML SVG の基本的な使い方（SVG入門） SVG の基本的な使い方に関する覚書です。 HTML ファイルに直接 svg 要素を記述するインライン SVG の使い方（viewBox の説明や動作確認サンプル、基本図形要素、fill と stroke、スタイルの設定、グループ化を行う g 要素や再利用可能な部品の定義に使う defs 要素、図形などのひな形を定義するための symbol 要素、マーカー、変形、グラデーション、パターン、クリッピングやマスキング）や SVG ファイルの最適化などの基本的な事項をまとめています。 以下は2020年12月時点での内容になります。仕様などに関しては変更になる可能性があります。 関連ページ： SVG アニメーション（SMIL を使ったアニメーション） CSS clip-path の使い方 CSS マスキング mask-image の使い方 Phot
svg要素の基本的な使い方まとめ
目次 svgの基礎知識 svgを取り扱うにあたっての心構えや，取り巻く環境について説明する． svg要素とsvg文書 svg文書の基本となる事項について説明し，htmlでの取扱いについて説明する． svg要素 図形の描画と図形のグループ化 svgで図形を描く上で最も基本となる要素について説明する． path，line，rect，circle，ellipse，polyline，polygon，g要素，stroke属性，fill属性，color属性 図形の変形 図形の変形について説明する． transform属性 図形の定義と再利用 svgのモジュール化と画像の読み込みについて説明する． defs，use，symbol，image要素 スタイル設定 svgにおけるスタイルの指定とxslによるsvgの生成法について解説する． style要素 マーカーの定義と設定 線要素の端点図形について説明する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヲタ芸 ロマンティック浮かれモード