図形の塗り潰しの色を変更
図形の塗り潰しの色を変更するには、fill属性を使用します。
CSSのfillプロパティとしても使用することができます。
構文
XML属性
fill="色"CSSプロパティ
fill:色;値
値は次の指定が可能です。
| 名称 | 例 |
|---|---|
| 指定なし（透明） | fill="none" |
| 16進数カラーコード | fill="#f00" |
| 10進数カラーコード | fill="rgb(255, 0, 0)" |
| 10進数 + アルファチャンネルカラーコード | fill="rgba(255, 0, 0, 0.5)" |
| カラーネーム | fill="red" |
| グラデーション | fill="url(#sample-gradient)" |
| 継承された色 | fill="currentColor" |
値の初期値はblackで、属性を省略するとこの値が設定されます。
グラデーションについては、図形にグラデーションを付けるページをご覧ください。
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<rect width="100" height="50" fill="#f00" />
<circle cx="100" cy="75" r="50" fill="rgba(0, 0, 255, 0.7)" />
</svg>