図形の線の色を変更
SVGで図形の線の色を変更するには、stroke属性を使用します。
CSSのstrokeプロパティとしても使用することができます。
構文
XML属性
stroke="色"CSSプロパティ
stroke:色;値
値は次の指定が可能です。
| 名称 | 例 |
|---|---|
| 指定なし（透明） | 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" |
値の初期値はnoneで、属性を省略するとこの値が設定されます。
noneは線を描画しません。
グラデーションについては、図形にグラデーションを付けるページをご覧ください。
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<rect width="100" height="50" x="1" y="1" fill="none" stroke="#f00" />
<circle cx="100" cy="75" r="50" fill="none" stroke="rgba(0, 0, 255, 0.7)" />
</svg>