SVG文書内の要素はCSSを使ってスタイリングすることができます。 多くの視覚的特徴や要素の幾何学的側面の一部は、CSSのプロパティによって制御されます。 例えば、fillプロパティは図形の内部を塗りつぶす際の塗料を制御し、 widthやheightプロパティは ‘rect’要素のサイズを制御します。
SVGユーザーエージェントは、この章で説明されているすべてのCSSスタイリング機構をサポートしなければなりません。
SVG 1.1では、‘style’要素や ‘style’を使ったインラインスタイルシートのサポートは必須ではありませんでした。 SVG 2では、これらが必須となります。
| SVG 2 要件: | HTML5の‘style’要素属性をSVGの‘style’要素に追加する。 |
|---|---|
| 決議: | SVG 2の‘style’要素はHTML5の‘style’要素と整合させる。 |
| 目的: | HTMLとSVGコンテンツで‘style’要素の挙動が異なり、著者が驚くことを防ぐため。 |
| 担当者: | Cameron (ACTION-3277) |
‘style’要素は、SVGコンテンツ内にスタイルシートを直接埋め込むことを可能にします。 SVGの‘style’要素は、 HTMLの対応する要素と同じ属性を持ちます。
属性定義:
| 名前 | 値 | 初期値 | アニメーション可能 |
|---|---|---|---|
| type | (下記参照) | text/css | no |
この属性は要素の内容のスタイルシート言語をメディアタイプとして指定します。 [rfc2046]。 属性が指定されていない場合は、スタイルシート言語はCSSとみなされます。
| 名前 | 値 | 初期値 | アニメーション可能 |
|---|---|---|---|
| media | (下記参照) | all | no |
この属性は、スタイルシートが適用されるために一致しなければならないメディアクエリを指定します。値はmedia_query_listとして構文解析されます。 指定されていない場合、スタイルシートは無条件に適用されます。
| 名前 | 値 | 初期値 | アニメーション可能 |
|---|---|---|---|
| title | (下記参照) | (なし) | no |
この属性はスタイルシートのタイトルを指定し、代替スタイルシートの公開や選択時に用いられます。値は任意です。
‘style’とその属性の意味・処理は HTMLの ‘style’要素で定義されたものと同じでなければなりません。
スタイルシートのテキスト内容は直接描画されることはありません。 ‘style’要素のdisplay値は ユーザーエージェントスタイルシートによって常にnoneに設定され、 この宣言は他のCSSルールやプレゼンテーション属性よりも重要でなければなりません。
SVG文書内のHTML ‘link’ 要素（つまり、HTML名前空間内でローカル名が"link"の要素）で、 ‘rel’ 属性が 'stylesheet' に設定されている場合は、HTML仕様で定義されたとおりに処理され、外部スタイルシートが文書に読み込まれ適用されなければなりません。インラインSVG断片の外側にあるHTML文書内のこうした要素もSVGコンテンツに適用されます。
この要素はHTML名前空間内である必要があるため、HTML ‘link’ 要素を text/html 文書のインラインSVG断片の一部としてパースすることはできません。ただし、SVG文書をXML構文でパースする場合、XML名前空間宣言によって要素をHTML名前空間に配置することができます。
外部スタイルシートへの参照方法として、HTML ‘link’ 要素を使わず、インラインスタイルシート内で@import規則を使用する方法もあります。例：
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@import url(mystyles.css);
</style>
<rect .../>
</svg>
これは次のようなものと同様に動作します：
<svg xmlns="http://www.w3.org/2000/svg"> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="mystyles.css" type="text/css"/> <rect .../> </svg>
また、XML文書では、外部CSSスタイルシートを<?xml-stylesheet?> 処理命令 [xml-stylesheet] で含めることもできます。
SVGの ‘style’ 要素や HTML ‘style’ 要素がHTML文書内で使われた場合、それらのスタイルシートは文書内のすべてのHTMLおよびインラインSVGコンテンツに適用されなければなりません。同様に、SVG文書内で使われたHTML ‘style’ 要素も、そのスタイルシートを文書に適用しなければなりません。
HTMLと同様、SVGはすべての要素で‘class’および‘style’ 属性をサポートし、要素固有のスタイリングを可能にしています。
属性定義:
| 名前 | 値 | 初期値 | アニメーション可能 |
|---|---|---|---|
| class | 空白区切りトークンの集合 [HTML] | (なし) | yes |
‘class’ 属性は、要素に1つ以上のクラス名を割り当て、スタイリング言語による指定に利用できます。
| 名前 | 値 | 初期値 | アニメーション可能 |
|---|---|---|---|
| style | (下記参照) | (なし) | no |
‘class’属性がSVG DOMでどのように反映されるか（className IDL属性、SVGElementで）を除き、 ‘class’および‘style’属性の意味と挙動は、 HTMLの対応する属性と同じでなければなりません。
次の例では、‘text’要素を‘class’ 属性と組み合わせて文書メッセージのマークアップに使っています。メッセージは英語版とフランス語版の両方で表示されます。
<!-- 英語メッセージ --> <text class="info" lang="en">Variable declared twice</text> <text class="warning" lang="en">Undeclared variable</text> <text class="error" lang="en">Bad syntax for variable name</text> <!-- フランス語メッセージ --> <text class="info" lang="fr">Variable déclarée deux fois</text> <text class="warning" lang="fr">Variable indéfinie</text> <text class="error" lang="fr">Erreur de syntaxe pour variable</text>
次のCSSスタイル規則は、情報メッセージは緑、警告メッセージは黄色、エラーメッセージは赤で表示するよう視覚的ユーザーエージェントに指示します：
text.info { fill: green; }
text.warning { fill: yellow; }
text.error { fill: red; }
この例は、‘style’属性を使って、上記の例と同様に‘text’ 要素をスタイリングする方法を示しています：
<text style="fill: green;" lang="en">Variable declared twice</text> <text style="fill: yellow;" lang="en">Undeclared variable</text> <text style="fill: red;" lang="en">Bad syntax for variable name</text>
一部のスタイリングプロパティは、スタイルシートや‘style’属性だけでなく、 プレゼンテーション属性としても指定できます。 これらは、名前が特定のCSSプロパティと一致（または類似）し、その値がそのプロパティの値として構文解析される属性です。プレゼンテーション属性は 著者レベル のカスケードに寄与し、他のすべての著者レベルのスタイルシートの後に適用され、特異性は0です。
プレゼンテーション属性はCSS値として（宣言としてではなく）構文解析されるため、 !important宣言 をプレゼンテーション属性内で使用すると無効な値となります。 プレゼンテーション属性の構文解析方法については属性構文を参照してください。
SVGの描画に影響するすべてのスタイルプロパティが対応するプレゼンテーション属性を持つわけではありません。 他の属性（たまたまスタイルプロパティ名と同じ名前の属性）は、プレゼンテーション属性として構文解析されてはならず、 CSSのカスケードや継承に影響してはなりません。 また、SVG名前空間内の要素のみがプレゼンテーション属性をサポートします。 ほとんどのSVGプレゼンテーション属性は、既存属性との名前の競合がないSVG名前空間内の任意の要素に指定可能です。 ただし、幾何プロパティは、特定の要素のみプレゼンテーション属性を持ちます。 他の要素に同名属性があっても、CSSのカスケードや継承に影響してはなりません。
transformプレゼンテーション属性の表に記載されている場合を除き、 プレゼンテーション属性名はプロパティ名と同じで、小文字で表記されます。
プレゼンテーション属性はSVG名前空間内の要素にのみ存在するため、例えばHTMLのvideo要素はグラフィックス要素として分類されますが、プレゼンテーション属性はサポートしません。
‘cx’、 ‘cy’、 ‘r’、 ‘x’、 ‘y’、 ‘width’、 ‘height’属性は、常にプレゼンテーション属性であるとは限りません。 例えば、‘text’や‘tspan’の ‘x’属性は xプロパティのプレゼンテーション属性ではなく、 ‘radialGradient’の ‘r’属性も rプロパティのプレゼンテーション属性ではありません。
今後、SVGコンテンツに適用される新しいプロパティにはプレゼンテーション属性が追加されません。したがって、著者はSVGコンテンツのスタイリングには、インライン‘style’属性やスタイルシートによるスタイリングプロパティの利用を推奨します。
プレゼンテーション属性のアニメーションは、対応するプロパティのアニメーションと同等です。
すべてのSVGユーザーエージェントがサポートしなければならないプロパティは以下の通りです：
以下のユーザーエージェントスタイルシートは、すべてのSVGユーザーエージェントで適用されなければなりません。
@namespace url(http://www.w3.org/2000/svg);
@namespace xml url(http://www.w3.org/XML/1998/namespace);
svg:not(:root), image, marker, pattern, symbol { overflow: hidden; }
*:not(svg),
*:not(foreignObject) > svg {
transform-origin: 0 0;
}
*[xml|space=preserve] {
text-space-collapse: preserve-spaces;
}
defs,
clipPath, mask, marker,
desc, title, metadata,
pattern, linearGradient, radialGradient,
script, style,
symbol {
display: none !important;
}
:host(use) > symbol {
display: inline !important;
}
:link, :visited {
cursor: pointer;
}
さらに、
すべてのインタラクティブユーザーエージェントは
:focus擬似クラス（通常はoutlineプロパティ使用）と
::selection擬似要素（適切なハイライト手法、例えば選択されたグリフを反転色で再描画）に
特徴的なスタイルを適用する必要があります。
ユーザーエージェントスタイルシート内の!important規則は
すべてのユーザーおよび著者スタイルを上書きします
[css-cascade-4]。
非描画要素や‘symbol’要素のdisplay値は変更できません。
symbolは、シャドウルートのホストが‘use’要素である場合のみ描画されなければならず、
（ホストの‘use’要素が描画される場合は常に描画される必要があります）。
他の要素およびその子コンテンツは、直接描画されることはありません。
CSS Transformsでは transform-originの初期値が50% 50%と定義されています。 SVG内の要素は、デフォルトで原点(0, 0)を中心に変形される必要があるため transform-originは上書きされ、 すべてのSVG要素（ただしルート‘svg’要素、および ‘svg’要素が ‘foreignObject’要素や非SVG名前空間の要素の子である場合は除く）は 0 0がデフォルト値として設定されます。 これらの要素は中心で変形されなければなりません。 [css-transforms-1]
OpenType仕様は、処理時に追加のユーザーエージェントスタイルシートの適用を要求します。 [OPENTYPE]。 内容は以下の通りです:
@namespace svg url(http://www.w3.org/2000/svg);
svg|text, svg|foreignObject {
display: none !important;
}
:root {
fill: context-fill;
fill-opacity: context-fill-opacity;
stroke: context-stroke;
stroke-opacity: context-stroke-opacity;
stroke-width: context-value;
stroke-dasharray: context-value;
stroke-dashoffset: context-value;
}
context-fillやcontext-strokeキーワードは本仕様で定義されており、 フォントグリフのコンテキスト要素は対応するテキストコンテンツ要素です。 他のキーワードはOpenType仕様で定義されており、 テキストコンテンツ要素のスタイル値がフォントグリフへ伝播することを保証し、 座標系の変化に応じて適切に調整されます。 [OPENTYPE]
上記で説明した機能に加え、SVGユーザーエージェントは以下のCSS機能もサポートしなければなりません:
SVGStyleElementオブジェクトは DOM内の‘style’要素を表します。
[Exposed=Window]
interface SVGStyleElement : SVGElement {
attribute DOMString type;
attribute DOMString media;
attribute DOMString title;
};
SVGStyleElement includes LinkStyle;
type、 media、 titleのIDL属性は それぞれ‘type’、 ‘media’、 ‘title’ 内容属性を反映します。