SVGパスの塗りつぶし色変更
2024-09-10
「CSSでSVGパスの塗りつぶし色を変更できるか？」の日本語解説
CSSでSVGパスの塗りつぶし色を変更することはできます。
SVG（Scalable Vector Graphics）はベクター形式の画像であり、HTMLに埋め込むことができます。この画像内のパス（形状）は、CSSを使用してスタイルを変更することができます。
例
<svg width="200" height="200">
<path d="M100,100 L150,50 L200,100 Z" fill="red" />
</svg>
上記のコードでは、赤い三角形を描画しています。ここで、fill="red"という属性がパスの塗りつぶし色を指定しています。
しかし、CSSを使用してこの色を変更することもできます：
svg path {
fill: blue;
}
このCSSルールは、SVG内のすべてのパス（<path>要素）の塗りつぶし色を青に変更します。
HTMLコード
<svg width="200" height="200">
<path d="M100,100 L150,50 L200,100 Z" fill="red" />
</svg>
- fill属性
パスの塗りつぶし色を指定します。ここでは、"red"が設定されています。 - d属性
パスの形状を定義するパスデータです。 - <path>要素
SVGパスを定義します。 - widthとheight属性
SVG画像の幅と高さを指定します。 - <svg>要素
SVG画像のコンテナです。
CSSコード
svg path {
fill: blue;
}
- svg path
SVG画像内のすべての<path>要素を選択します。
動作
このコードを実行すると、赤い三角形が青色に塗りつぶされます。CSSのルールが<path>要素の塗りつぶし色をオーバーライドしているためです。
CSSは最も一般的な方法ですが、SVGパスの塗りつぶし色を変更する他の方法もあります。
SVG属性の変更
- JavaScriptを使用
const path = document.querySelector('svg path'); path.setAttribute('fill', 'green');<path>要素のfill属性を"green"に変更します。
SVG DOM API
- JavaScriptを使用
const path = document.querySelector('svg path'); path.style.fill = 'yellow';<path>要素のfillスタイルプロパティを"yellow"に変更します。
SVGの直接編集
- テキストエディタを使用
SVGファイルを直接編集し、<path>要素のfill属性を変更します。
css svg
