SVG塗りつぶし色のCSS変更
2024-09-02
SVG画像の塗りつぶし色をCSSで変更する方法
HTMLでSVG画像を背景画像として使用し、CSSでその塗りつぶし色を変更する方法について説明します。
SVG画像の作成
まず、SVG画像を作成します。例えば、簡単な円を描いたSVGファイル（circle.svg）があるとします。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
HTMLファイルでSVG画像を設定
次に、HTMLファイルでSVG画像を背景画像として設定します。
<!DOCTYPE html>
<html>
<head>
<title>SVG Background Image</title>
</head>
<body>
<div style="background-image: url('circle.svg'); height: 100px; width: 100px;"></div>
</body>
</html>
CSSで塗りつぶし色を変更
最後に、CSSを使用してSVG画像の塗りつぶし色を変更します。
div {
background-image: url('circle.svg');
height: 100px;
width: 100px;
background-color: red; /* 塗りつぶし色を変更 */
}
このコードでは、background-colorプロパティを使用して、SVG画像の塗りつぶし色を赤に変更しています。
注意
- SVG画像内の
fill属性を指定した場合、CSSのbackground-colorプロパティを使用しても変更できますが、SVGファイル内のfill属性が優先されます。 - 塗りつぶし色を指定する方法は、SVGファイル内の
fill属性を使用する方法と、CSSのbackground-colorプロパティを使用する方法の2つがあります。 - SVG画像の塗りつぶし色を変更するには、CSSの
background-colorプロパティを使用します。
SVG塗りつぶし色のCSS変更のコード例
SVGファイル (circle.svg)
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
HTMLファイル (index.html)
<!DOCTYPE html>
<html>
<head>
<title>SVG Background Image</title>
</head>
<body>
<div style="background-image: url('circle.svg'); height: 100px; width: 100px;"></div>
</body>
</html>
CSSファイル (style.css)
div {
background-image: url('circle.svg');
height: 100px;
width: 100px;
background-color: red; /* 塗りつぶし色を変更 */
}
解説
- SVGファイル
円を描いたシンプルなSVGファイルです。fill="blue"属性により、デフォルトの塗りつぶし色は青になっています。 - HTMLファイル
div要素に背景画像としてSVGファイルを指定しています。 - CSSファイル
div要素のスタイルを定義しています。background-color: red;により、SVG画像の塗りつぶし色を赤に変更しています。
SVGファイル内のfill属性を変更する
SVGファイル内のfill属性を直接変更することで、塗りつぶし色を変更することができます。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
この方法では、SVGファイル自体を変更する必要があるため、動的に塗りつぶし色を変更したい場合は適していません。
JavaScriptを使用してfill属性を変更する
JavaScriptを使用して、SVG要素のfill属性を変更することができます。
<!DOCTYPE html>
<html>
<head>
<title>SVG Background Image</title>
</head>
<body>
<div style="background-image: url('circle.svg'); height: 100px; width: 100px;"></div>
<script>
const svgElement = document.querySelector('div').style.backgroundImage.replace('url(', '').replace(')', '');
const svg = document.querySelector(`svg[href="${svgElement}"]`);
svg.querySelector('circle').setAttribute('fill', 'green');
</script>
</body>
</html>
この方法では、JavaScriptを使用してSVG要素を取得し、fill属性を変更しています。これにより、動的に塗りつぶし色を変更することができます。
CSSのfilterプロパティを使用する
CSSのfilterプロパティを使用して、SVG画像の色を調整することができます。
div {
background-image: url('circle.svg');
height: 100px;
width: 100px;
filter: invert(100%); /* 色を反転 */
}
この方法では、SVG画像の色を反転したり、色相や彩度を調整することができます。
html css svg
