SVGエッセンシャルズ 第2版

付録Bスタイルシート入門

「5章 文書構造」でも述べたように、SVG要素のいくつかの属性は、その要素の幾何学的な形状を制御します。<circle>要素のcx属性（中心のx座標）は、そのような属性の一例です。属性にはそのほかに、たとえばfill属性のように、要素のプレゼンテーション（視覚的な提示方法）を制御するものもあります。スタイルシートは、プレゼンテーションを幾何学的な構造から切り離すための手段を提供します。スタイルシートを使うと、すべての文書から参照される1つのスタイルシートを変更することで、さまざまなSVG要素の（さらには文書の）視覚的な表示を制御できます。

B.1　スタイルの解剖

スタイル（style）とは、ある要素についての視覚的なプロパティ（特性）と、そのプロパティに持たせたい値とを指定したものです。プロパティの名前と値は、コロン（:）で区切ります。たとえば、ある要素のストロークの色を青にするためのスタイル指定子は、stroke: blueとなります。

1つのスタイルの中で複数のプロパティを指定するには、それらの指定子をセミコロン（;）で区切ります。次に示すスタイル指定子は、ストロークの色を赤に、ストロークの幅を3ピクセルに、塗りつぶしの色をライトブルーに設定します。プロパティと値の最後のペアの後にも、セミコロンを記述します。これは必須ではありませんが、一貫した外見をスタイルに与えるために行います。

stroke: red; stroke-width: 3px; fill: #ccccff;

B.2　インラインスタイル：style属性

設定したい視覚プロパティを決めたら、それらを適用する要素を選択する必要があります。スタイル指定を1つの要素に適用するための最も簡単な方法は、スタイル指定を ...