svg要素の基本的な使い方まとめ
3.図形の描画と図形のグループ化 SVGにおいてはグラフィック描画の手続きをXMLツリーとして表現する．様々な要素の組み合わせで複雑なグラフィックを構成するのだ．本項では最も基本のpath要素とその他の基本図形要素，及びg要素による図形のグループ化について説明する．これらの要素はSVGを表示可能な全ての環境で動作し，簡単なグラフィックであればこれだけで十分に間に合う． path:パス図形の描画 path要素は任意の図形を表す．図形定義が柔軟に行えるが，円や四角などの単純な図形を描画するだけなら後述する専用の要素を使ったほうが良い． パス図形の定義 d属性には曲線を引く際のコマンド(パスコマンド)のリスト(パスデータ文字列)を指定する．パスデータ文字列の前から順にコマンドを実行し，得られた(曲)線に囲まれた領域をパス図形と呼ぶ．SVGにおけるグラフィックはこのパス図形を元に描画される． d属
svg要素の基本的な使い方まとめ
11.画像効果 フィルター効果を用いることでそのままでは印象の薄い平面図形に様々な表情を持たせることができる．本項ではこのフィルター効果について説明する．SVGの持つ機能の中でも特に仕様が複雑なものの一つである． filter:画像効果 filter要素は図形に対しての視覚効果を表す．元の画像・図形を維持しつつ，見た目の変更・装飾を行えるため非常に魅力的な機能である．一般に画像はその構成する画素毎にrgb値と不透明度（alpha）値とを定めるが，filterはこの色に関わる4つの値を画素毎に編集するだけである．従ってサイズを変えたり回転させるといった画像の変形を伴う操作については原則transform属性を用いねばならない．なお，filterによる画像効果は暗黙的なラスタライズを引き起こし，本質的に重いため掛け過ぎてはならない．特にフィルターを掛ける領域が広くなるほど負荷が高くなる． fi
svg要素の基本的な使い方まとめ
9.グラデーションとパターン 見栄えの良いグラフィックには色のグラデーションは欠かせない．SVGにおいても然りで，本項ではこのグラデーション処理を表すグラデーション要素について説明する．また同様に塗りつぶしに利用されるsolidColor,pattern,hatch要素についてもここで取り上げる．なおこれらの要素による塗り潰し機構をSVGではペイントサーバと呼んでいる． グラデーションの基本構成 グラデーションは塗り潰しに用いる色を徐々に変化させることで，単色によるものに比べて滑らかな見た目をもたらす．グラフィックを描く場合には必須な機能であり，SVGにおいても帯状にグラデーションを掛けるlinearGradient要素と放射状に掛けるradialGradient要素, 及び不定形グラデーションを定めるmeshGradient要素の3つが提供されている． SVGによるグラデーションはCSS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
