SVGスタイル変更 CSSで
CSSでSVGのスタイルを変更する
**SVG (Scalable Vector Graphics)**は、ベクターグラフィックス形式のファイルであり、テキストやグラフィックを記述するXMLベースの言語です。CSS (Cascading Style Sheets)は、HTML文書のスタイルを定義する言語です。
CSSを使用してSVGのスタイルを変更することで、SVGの要素（例えば、パス、矩形、テキストなど）の色、線幅、塗りつぶし、フォント、位置、サイズなどをカスタマイズすることができます。
基本的な例
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
上記のHTMLコードでは、半径50ピクセルの青い円を描画しています。この円のスタイルをCSSで変更するには、以下の方法を使用します。
circle {
fill: red;
stroke: black;
stroke-width: 2;
}
このCSSルールにより、円の塗りつぶし色を赤、線の色を黒、線の幅を2ピクセルに変更することができます。
具体的な例
SVGファイル
<svg width="200" height="200">
<rect id="myRect" width="100" height="100" fill="green" />
</svg>
CSS
#myRect {
fill: blue;
stroke: red;
stroke-width: 5;
transform: rotate(45deg);
}
この例では、SVGファイル内の矩形要素のIDを「myRect」として指定しています。CSSでは、「#myRect」セレクタを使用して、その矩形のスタイルを変更しています。
変更されるスタイル
- 45度回転
- 線の幅を5ピクセルに変更
- 線の色を赤に変更
- 塗りつぶし色を緑から青に変更
注意
- CSSを使用してSVGのスタイルを変更する際、ブラウザのサポート状況を確認する必要があります。
- SVGの要素には、独自の属性（例えば、
cx、cy、r、width、heightなど）があります。これらの属性は、CSSを使用して直接変更することはできません。
SVGスタイル変更 CSSで
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>
circle {
fill: red;
stroke: black;
stroke-width: 2;
}
<svg width="200" height="200">
<rect id="myRect" width="100" height="100" fill="green" />
</svg>
#myRect {
fill: blue;
stroke: red;
stroke-width: 5;
transform: rotate(45deg);
}
SVG内でのスタイル設定
SVGファイル自体にスタイル情報を直接埋め込むことができます。これは、CSSファイルを使用せずに、SVG要素の属性を使用してスタイルを定義する方法です。
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red" stroke="black" stroke-width="2" />
</svg>
この例では、円のスタイルを直接SVG要素の属性として指定しています。
JavaScriptによるスタイル変更
<svg width="200" height="200">
<circle id="myCircle" cx="100" cy="100" r="50" fill="blue" />
</svg>
<script>
var circle = document.getElementById("myCircle");
circle.style.fill = "red";
circle.style.stroke = "black";
circle.style.strokeWidth = "2";
</script>
この例では、JavaScriptを使用して円のスタイルを変更しています。
CSSプリプロセッサの使用
CSSプリプロセッサ（Sass、Lessなど）を使用することで、CSSの機能を拡張し、より効率的なスタイル定義が可能になります。
#myCircle {
fill: red;
stroke: black;
stroke-width: 2;
}
このSassコードをコンパイルすると、通常のCSSに変換されます。
SVGライブラリの使用
SVGライブラリ（Snap.svg、D3.jsなど）を使用することで、SVGの操作を簡素化し、複雑なグラフィックを作成することができます。
var svg = Snap("#mySvg");
var circle = svg.circle(100, 100, 50);
circle.attr({
fill: "red",
stroke: "black",
strokeWidth: 2
});
この例では、Snap.svgを使用して円を作成し、スタイルを指定しています。
css image svg
