図形にスタイルシートを適用
SVGで図形にスタイルシートを適用するには、HTMLの構文と同様にstyle要素またはstyle属性を使用します。
SVG要素に埋め込むことができます。
外側のCSSからセレクターを使用してスタイルを割り当てることもできます。
構文
要素
<style>
ルールセット
</style>属性
style="宣言"サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<style>
.sample {
fill:#d00;
stroke:#00d;
stroke-width:6px;
}
</style>
<rect width="100" height="100" x="50" y="25" class="sample" />
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<rect width="100" height="100" x="50" y="25" style="fill:#d00;stroke:#00d;stroke-width:6px;" />
</svg>外側のCSSからスタイルを割り当てる
HTMLにCSSを当てるのと同様にSVGに対してもCSSを当てることができます。
ただしSVG要素とその子孫要素のみ当てることができ、SVGファイルやData URIスキームのSVGに対して当てることはできません。
サンプルコード
次のコードはHTML内に記述しているSVGに対して外部CSSからスタイルを当てています。
外部CSS
.image svg {
width:100%;
height:auto;
}
.image svg rect {
fill:#d00;
stroke:#00d;
stroke-width:6px;
}HTML内のSVG
<div class="image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<rect width="100" height="100" x="50" y="25" />
</svg>
</div>