SVG 教程

SVG要素

SVG CSS スタイル

CSSを使用してSVG形状のスタイルを設定できます。スタイルとは、形状の外観を変更することを意味します。これは、線の色と幅、塗りつぶしの色、不透明度、形状の多くの他の属性などです。

有6以下のスタイルはSVG画像内の形状に設定できます。それぞれ、本文で紹介します。本文の最後に、SVGと一緒に使用できるCSS属性の一覧を見つけることができます。

CSSスタイル属性の使用

特定のスタイル属性（例えばstrokeやfill）を使用してSVG形状をスタイル化できるかどうかを確認します。以下はその例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<circle　cx="40"　cy="40"　r="24"　stroke="#000000"　fill="#00ff00"　/>
</svg>

テストを見て‹/›

利用可能なスタイル属性が一連ありますが、内連スタイルシートや外部スタイルシートの使用を推奨します。したがって、ここではスタイル属性について多くは紹介しません。

style属性とCSS属性の使用

この方法は特定のスタイル属性を使用しません。代わりに、`style`属性を使用し、そこにCSS属性を指定します。スタイルを直接スタイル内に埋め込む必要がある場合は、この方法が特定の属性よりも優れています。なぜなら、CSS属性の名前を学ぶことができます。内部または外部のスタイルシートのCSS属性はすべて同じであり、コピー＆ペーストや学習が容易です。

これは《style》属性とCSS属性を使用して輪郭と塗りつぶしを設定した円です：

例

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="40"　cy="40"　r="24"　style="stroke:　#000000;　fill:#00ff00;"　/></svg>

テストを見て‹/›

インラインスタイルシートの使用

形状のスタイルをインラインスタイルシートで定義し、それらのスタイルを形状に自動的に適用することができます。以下はその例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle　{
　　　　　　　　　　　stroke:　#006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　]]>
　　　　</style>
　　　　
　　　　<circle　　cx="40"　cy="40"　r="24"/>
</svg>

テストを見て‹/›

《style》要素内で《circle》要素のスタイルをどう定義するか注意してください。これはHTMLとCSSでの動作方法と同じです。

内部スタイルシートはInternet Explorer 7そしてFirefox 3.0.5中で正常に動作します。

効果は以下の通りです:

class属性

形状の属性を形状のスタイルを選択するために使用できます。特定の形状のすべての形状（例えば、すべての円）にスタイルを適用するのではなく、形状に直接適用します。HTML要素でclassを使用するのと同様です。

これは2つの円のスタイルの例です-緑色と赤色。<circle>は以下のclass属性を使用して、各要素にそれぞれのスタイルを適用します：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<style　type="text/css"　>
　　　　　　<![CDATA[
　　　　　　　　circle.myGreen　{
　　　　　　　　　　　stroke:　#006600;
　　　　　　　　　　　fill:　　　#00cc00;
　　　　　　　　}
　　　　　　　circle.myRed　{
　　　　　　　stroke:　#660000;
　　　　　　　fill:　　　#cc0000;
　　　　}
　　　　　　]]>
　　　　</style>
　　　　<circle　　class="myGreen"　cx="40"　cy="40"　　r="24"/>
　　　　<circle　　class="myRed"　　　cx="40"　cy="100"　r="24"/>
</svg>

テストを見て‹/›

circleに注意してください、スタイルシート内のセレクタ名が.myGreenと.myRedの接尾辞を持っています。現在、<circle>要素はclass="myGreen"で緑色を定義したり、class="myRed"で赤色の円のスタイルを定義できます。

使用外部スタイルシート

使用外部スタイルシートの場合、スタイルシートは独立したファイルに配置され、Webサーバーに配置されます。さらに、<svg>要素の前に、SVGファイルに以下の宣言を含める必要があります：

例

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>

この処理指令はSVGビューアがCSSスタイルシートを使用してファイル“ svg-stylesheet.css”。

これはSVGファイルで宣言されている例です：

例

<?xml-stylesheet　type="text/css"　href="svg-stylesheet.css"　?>
<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24"
　　　　　　　style="stroke:#006600;　fill:#00cc00"/>
</svg>

注意：外部CSSスタイルシートはInternet Explorer 7中では正常に動作するようですが、Firefox 3.0.5中ではできません。

HTMLページでスタイルシートを使用します。

SVG画像をHTMLページに埋め込むと、SVG画像のスタイルシートもHTMLページに埋め込むことができます。これは例です：

例

<html>
<body>
<style>
</style>
<svg>
</svg>
</body>
</html>

テストを見て‹/›

SVG画像内の形状にスタイルを追加するには、style要素内に通常のCSS属性を追加するだけで良いです。SVG要素のスタイルを設定するために、HTMLで通常使用されるCSS選択子を使用できます。これは、HTMLページ内のcircle要素がHTMLページ内のCSSスタイルシートでスタイル設定されているHTMLページです：

例

<html>
<body>
<style>
　　circle　{
　　　　　stroke:　#006600;
　　　　　fill　　:　#00cc00;
　　}
</style>
<svg>
　　<circle　cx="40"　cy="40"　r="24"　/>
</svg>
</body>
</html>

テストを見て‹/›

SVG画像をHTMLページに直接埋め込む場合、これはSVG形状のスタイルを設定する最も簡単な方法です。

形状内でローカルにスタイルシートをオーバーライドする

スタイルシートに既にスタイルが設定されている場合、新しいスタイル属性を形状内でローカルに設定することで、新しいスタイルを設定するためにこのスタイルをオーバーライドできます。形状内でローカルに設定されたスタイルは、内部または外部のスタイルシートで定義されたスタイルよりも常に優先されます。

SVG CSS属性

SVG要素には以下のCSS属性を設定できます。すべての要素にはこれらのCSS属性がすべて設定されているわけではありません。したがって、CSS属性は異なる要素に対して複数のテーブルに分類されます。

形状CSS属性

path要素と他の形状要素のCSS属性：

CSS属性	説明
fill	形状の塗りつぶし色を設定します。
fill-opacity	形状の塗りつぶし不透明度を設定します。
fill-rule	形状の塗りつぶしルールを設定します。
marker	この形状の線（辺）に沿って使用するマーカーを設定します。
marker-start	この形状の線（辺）に沿って使用する開始マーカーを設定します。
marker-mid	この形状の線（辺）に沿って使用する中間マーカーを設定します。
marker-end	この形状の線（辺）に沿って使用する終了マーカーを設定します。
stroke	この形状の輪郭を描画するための筆跡（線）の色を設定します。
stroke-dasharray	この形状の輪郭を描画するための筆跡（虚線）を設定します。
stroke-dashoffset	この形状の輪郭を描画するための筆跡（直線）の破折号オフセットを設定します。
stroke-linecap	この形状の輪郭を描画するための筆跡（線）の線帽を設定します。有効値はround、butt、squareです。
stroke-miterlimit	この形状の輪郭を描画するための筆跡（直線）の斜接制限を設定します。
stroke-opacity	この形状の輪郭を描画するための筆跡（直線）の不透明度を設定します。
stroke-width	この形状の輪郭を描画するための筆跡（線）の幅を設定します。
text-rendering	この形状の輪郭を描画するためのテキストレンダリングを設定します。

テキストCSS属性

text要素のCSS属性：

CSS属性	説明
alignment-baseline	テキストのxおよびy座標とそのアライメントを設定。
baseline-shift	テキストを表示するための基線オフセットを設定。
dominant-baseline	主要な基線を設定。
glyph-orientation-horizontal	水平の字形方向を設定。
glyph-orientation-vertical	垂直の字形方向を設定。
kerning	レンダリングテキストの字距（字距は文字間隔）を設定。

渐変CSS属性

SVG 渐変のCSS属性：

CSS属性	説明
stop-color	stopを使用して、渐変で使用する要素に終了色を設定。
stop-opacity	stopを使用して、渐変で使用する要素に停止不透明度を設定。

SVG stroke 属性 SVG <use> 要素