welcome: please sign in

"パターン"のようなページがひとつ見つかりました。リダイレクトします。

メッセージを消す
location: グラデーションとパターン

グラデーションとパターン


線形グラデーション(linearGradient)

グラデーションの定義は linearGradient タグで名前を指定し、stop 要素で色を指定します。 上の例では0%の位置を赤紫、100%の位置を水色にしています。 両端の色のほかに20%、50%など途中の色を含めて指定してもよい。

利用するには fill:url(#名前) です。 図形の左端が0%で指定した色、右端が100%で指定した色になります。

グラデーションの方向

向きのちがうグラデーションを作るには、上記の方法でグラデーションを作成した後に、それを利用して向きだけを指定します。

名前がgr2のグラデーションはgr1とグラデーションの向きを左右逆にしたものになります。

上から下へのグラデーションにするには

のようにします。

斜め方向のグラデーションも可能です。

繰り返しなど

spreadMethod に次のどれかを指定することができます。


円形グラデーション(radialGradient)

グラデーションの定義は radialGradient タグで名前を指定し、stop 要素で色を指定します。 上の例では0%の位置を赤紫、100%の位置を水色にしています。 両端の色のほかに20%、50%など途中の色を含めて指定してもよい。

利用するには fill:url(#名前) です。 図形の左端が0%で指定した色、右端が100%で指定した色になります。

グラデーションの中心


パターン

図形をまとめてpatternとして定義することで、模様をfillの属性として使うことができます。