6. スタイル付け — Styling

6.1. ~CSSを利用する~SVG内容の~style付け

~SVG文書~内の要素は、 ~CSSを利用して~styleできる。 ほとんどの視覚-特性, および要素~幾何のある側面は、 ~CSS `~prop@ 利用して制御される。 例えば： `fill$p ~propは、 図形の内側を~fillするときに利用される塗りを制御する ／ `width$p, `height$p ~propは、 `rect$e 要素の~sizeを制御するときに利用される。 ◎ Elements in an SVG document can be styled using CSS. Most visual characteristics and some aspects of element geometry are controlled using CSS properties. For example, the fill property controls the paint used to fill the inside of a shape, and the width and height properties are used to control the size of a ‘rect’ element.

~SVG~UAは、 この章に述べる~CSS~style付けの仕組みすべてを~supportするモノトスル。 ◎ SVG user agents must support all of the CSS styling mechanisms described in this chapter.

注記： ［ `style$e 要素 ／ `style$a 属性 ］を利用する~inline~stylesheet用の~supportは、 ~SVG-11においては要求されていなかったが， ~SVG-2においては要求される。 ◎ In SVG 1.1, support for inline style sheets using the ‘style’ element and ‘style’ was not required. In SVG 2, these are required.

6.2. ~inline~stylesheet： `style^e 要素

`style$e 要素は、 ~SVG内容の中に直に~stylesheetを埋込むことを許容する。 ~SVGの `style$e 要素は、 ~HTML `style$eH 要素と同じ属性を備える。 ◎ The ‘style’ element allows style sheets to be embedded directly within SVG content. SVG's ‘style’ element has the same attributes as the corresponding element in HTML.

◎属名 `type@a ◎属値 （下を見よ） ◎属初 `text/css^l ◎属ア 不可 ◎表終 ◎ Name Value Initial value Animatable type (see below) text/css no

この属性は、 要素の内容の~stylesheetの言語を `~MIME型＠~RFCx/rfc2046$ `rfc2046$r として指定する。 属性が指定されていない場合、 ~stylesheet言語は~CSSと見做される。 ◎ This attribute specifies the style sheet language of the element's contents, as a media type. [rfc2046]. If the attribute is not specified, then the style sheet language is assumed to be CSS.

◎属名 `media@a ◎属値 （下を見よ） ◎属初 `all^l ◎属ア 不可 ◎表終 ◎ Name Value Initial value Animatable media (see below) all no

この属性は、 ~stylesheetを適用するために合致しなければナラナイ媒体~queryを指定する。 その値は `media_query_list＠~TR/css3-mediaqueries/#syntax$P として構文解析される。 指定されていない場合、 ~stylesheetは無条件に適用される。 ◎ This attribute specifies a media query that must be matched for the style sheet to apply. Its value is parsed as a media_query_list. If not specified, the style sheet applies unconditionally.

◎属名 `title@a ◎属値 （下を見よ） ◎属初 （ナシ） ◎属ア 不可 ◎表終 ◎ Name Value Initial value Animatable title (see below) (none) no

この属性は、 ~stylesheet用の~titleを指定する。 それは、いくつかの代替-~stylesheetから，いくつかを［ 公開する／選定する ］ときに利用される。 属性は~~任意の値をとる。 ◎ This attribute specifies a title for the style sheet, which is used when exposing and selecting between alternate style sheets. The attribute takes any value.

`style$e とその各種~属性の意味論と処理は~HTML `style$eH 要素~用に定義されるものと同じになるモノトスル。 ◎ The semantics and processing of a ‘style’ and its attributes must be the same as is defined for the HTML ‘style’ element.

~stylesheetの~text内容は、 直に描画されることは決してない： `style$e 要素に対する `display$p 値は、 `~UA~stylesheet$により，常に `none^v に設定されるモノトスル — この宣言の重要度は，他のどの［ ~CSS規則／呈示~属性 ］よりも高いモノトスル。 ◎ The style sheet's text content is never directly rendered; the display value for the ‘style’ element must always be set to none by the user agent style sheet, and this declaration must have importance over any other CSS rule or presentation attribute.

6.3. 外部~stylesheet：~HTML `link^e 要素の効果

~SVG文書~内の~HTML `link$eH 要素 （すなわち、~HTML名前空間に属する要素のうち，局所~名 `link^l であるもの） のうち，その `rel^a 属性が `stylesheet^v に設定されているものは、 ~HTML仕様に定義されるように — 外部~stylesheetを読込んで文書に適用させるよう — 処理するモノトスル。 ~HTML文書~内の~inline~SVG素片の外側にある そのような要素は、 ~SVG内容にも適用されるモノトスル。 ◎ An HTML ‘link’ element in an SVG document (that is, an element in the HTML namespace with local name "link") with its ‘rel’ attribute set to 'stylesheet' must be processed as defined in the HTML specification and cause external style sheets to be loaded and applied to the document. Such elements in HTML documents outside of an inline SVG fragment must also apply to the SVG content.

注記： ~HTML `link$eH 要素は、 ~HTML名前空間に属することが要求されるので，［ `text/html^c 文書~内の~inline~SVG素片 ］の一部としては構文解析され得ない。 一方で，~XML構文を利用して~SVG文書を構文解析するときは、 ~XML名前空間~宣言を利用して要素を~HTML名前空間に属するようにできる。 ◎ Because the element is required to be in the HTML namespace, it is not possible for an HTML ‘link’ element to be parsed as part of an inline SVG fragment in a text/html document. However, when parsing an SVG document using XML syntax, XML namespace declarations can be used to place the element in the HTML namespace.

<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>

6.4. ~HTML文書~内の~stylesheet

~HTML文書~内に［ ~SVG `style$e ／ ~HTML `style$eH 要素 ］が利用されたときは、 その~stylesheetは，文書~内のすべての［ ~HTML, ~inline~SVG ］内容に適用されるモノトスル。 同様に，~SVG文書~内に利用された どの~HTML `style$eH 要素も，その~stylesheetを当の文書に適用するモノトスル。 ◎ When an SVG ‘style’ or an HTML ‘style’ element is used in an HTML document, those style sheets must apply to all HTML and inline SVG content in the document. Similarly, any HTML ‘style’ element used in an SVG document must also apply its style sheet to the document.

6.5. 要素に特有な~style付け： `class^a, `style^a 属性

要素に特有な~style付けを~supportするため、 ~HTMLと同じく ~SVGも，すべての要素~上で `class$a, `style$a 属性を~supportする。 ◎ As with HTML, SVG supports the ‘class’ and ‘style’ attributes on all elements to support element-specific styling.

◎属名 `class@a ◎属値 `~space等で分離された~token集合$ `HTML$r ◎属初 （ナシ） ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable class set of space-separated tokens [HTML] (none) yes

`class$a 属性は、 要素に 1 個~以上の~class名をアテガう。 それは、~style付け言語による~address法に利用できる。 ◎ The ‘class’ attribute assigns one or more class names to an element, which can then be used for addressing by the styling language.

◎属名 `style@a ◎属値 （下を見よ） ◎属初 （ナシ） ◎属ア 不可 ◎表終 ◎ Name Value Initial value Animatable style (see below) (none) no

`style$a 属性は、 要素に~CSS宣言を給するときに利用される。 属性は、 `declaration-list＠~CSSSTYLEATTR#syntax$P として構文解析される。 ◎ The ‘style’ attribute is used to supply a CSS declaration of an element. The attribute is parsed as a declaration-list.

`class$a 属性は~SVG~DOM（ `SVGElement$I1 上の `className$m1 ~IDL属性）内に反映されることを除いて，［ `class$a ／ `style$a ］属性の意味論と挙動は、 `~HTMLにおける対応する属性＠~HTMLdom#global-attributes$と同じになるモノトスル。 ◎ Aside from the way that the ‘class’ attribute is reflected in the SVG DOM (in the className IDL attribute on SVGElement), the semantics and behavior of the ‘class’ and ‘style’ attributes must be the same as that for the corresponding attributes in HTML.

<!-- ~English~message -->
<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>
<!-- ~French~message -->
<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>

text.info    { fill: green; }
text.warning { fill: yellow; }
text.error   { fill: red; }

<text style="fill: green;" lang="ja">同じ変数が複数回~宣言されています</text>
<text style="fill: yellow;" lang="ja">変数が宣言されていません</text>
<text style="fill: red;" lang="ja">変数~名の構文が不良です</text>

6.6. 呈示~属性

一部の~style付け~propは、［ ~stylesheet, `style$a 属性 ］内のみならず， `呈示~属性@ （ `presentation attribute^en ）にも指定できる。 これらの属性の［ 名前は，対応する~CSS~propの名前に合致する（または類似する）／ 値は，同じ~propの値として構文解析される ］。 呈示~属性は、 ~cascadeにおいては， `作者~levelに詳細度 0 として寄与する＠~CASCADE#preshint$ — 他のどの作者~levelの~stylesheetよりも前に。 ◎ Some styling properties can be specified not only in style sheets and ‘style’ attributes, but also in presentation attributes. These are attributes whose name matches (or is similar to) a given CSS property and whose value is parsed as a value of that property. Presentation attributes contribute to the author level of the cascade, followed by other author-level style sheets, and have specificity 0.

呈示~属性は、 ~CSS宣言ではなく，~CSS値として構文解析されるので、 呈示~属性の中の `!important$css は，それを`無効な値$にする。 呈示~属性がどう構文解析されるかの詳細は、 `属性~構文＠~SVGtypes#presentation-attribute-css-value$を見よ。 ◎ Since presentation attributes are parsed as CSS values, not declarations, an !important declaration within a presentation attribute will cause it to have an invalid value. See Attribute syntax for details on how presentation attributes are parsed.

~SVG描画に影響し得る~style~propには、 対応する`呈示~属性$が無いものもある。 対応する~style~propが無い属性【すなわち、`呈示~属性$とされないもの】は、 ある~style~propと名前が同じであろうが，［ 呈示~属性として構文解析しない／~CSS~cascade法と継承には影響しない ］モノトスル。 加えて，呈示~属性を~supportする要素は、 ~SVG名前空間に属するものに限られる。 ほとんどの呈示~属性は、 既存の属性と名前が衝突しない所では，~SVG名前空間に属する どの要素に指定してもヨイ。 しかしながら，`幾何~prop$に等価な呈示~属性を有する要素は、 そう指名されたものに限られる。 他の要素~上の同じ名前の属性は、 ~CSS~cascade法と継承には影響しないモノトスル。 ◎ Not all style properties that can affect SVG rendering have a corresponding presentation attribute. Other attributes (which happen to share the name of a style property) must not be parsed as a presentation attribute and must not affect CSS cascading and inheritance. Also, only elements in the SVG namespace support presentation attributes. Most SVG presentation attributes may be specified on any element in the SVG namespace where there is not a name clash with an existing attribute. However, the geometry properties only have equivalent presentation attributes on designated elements. Attributes of the same name on other elements must not affect CSS cascading and inheritance.

呈示~属性の名前は、 ~prop名と同じ小文字~並びになる — 次の表t内で `transform$p に対応する呈示~属性~用に注記されるものを除いて： ◎ Except as noted in the table for the transform presentation attributes, the presentation attribute name is the same as the property name, in lower-case letters.

注記： ［ `cx^a ／ `cy^a ／ `r^a ／ `x^a ／ `y^a ／ `width^a ／ `height^a ］属性は、 呈示~属性になるとは限らないことに注意。 例えば［ `text$e ／ `tspan$e ］上の `x$a 属性は、 `x$p ~prop用の呈示~属性でない。 `radialGradient$e 上の `r$a 属性は、 `r$p ~prop用の呈示~属性でない。 ◎ Note that ‘cx’, ‘cy’, ‘r’, ‘x’, ‘y’, ‘width’ and ‘height’ attributes are not always presentation attributes. For example, the ‘x’ attribute on ‘text’ and ‘tspan’ is not a presentation attribute for the x property, and the ‘r’ attribute on a ‘radialGradient’ is not a presentation attribute for the r property.

注記： 将来において ~SVG内容に適用される新たな~propは、 呈示~属性とされることはない。 したがって作者には、 ~SVG内容を~styleするときは，~inline［ `style$a ~prop ／ ~stylesheet ］を通して~style付け~propを利用することが示唆される — 呈示~属性ではなく。 ◎ In the future, any new properties that apply to SVG content will not gain presentation attributes. Therefore, authors are suggested to use styling properties, either through inline ‘style’ properties or style sheets, rather than presentation attributes, for styling SVG content.

呈示~属性の~animationは、 対応する~propを~animateすることに等価になる。 ◎ Animation of presentation attributes is equivalent to animating the corresponding property.

6.7. ~supportが要求される~prop

すべての~SVG~UAは、 この仕様にて定義される すべての~propに加えて，次の表tに挙げる~propを~supportするモノトスル： ◎ The following properties must be supported by all SVG user agents: ◎ all properties defined in this specification

6.8. ~UA~stylesheet

すべての~SVG~UAは、 次に与える`~UA~stylesheet＠~CASCADE#cascade-origin-ua$【！#cascade】を適用するモノトスル： ◎ The following user agent style sheet must be applied in all SVG user agents.

@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;
}
/* 【 `text-space-collapse^p は、今や `white-space-collapse^p に改称された。】 */

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;
}

加えて，すべての対話的~UAには、 次に挙げるものには，~~普通と~~異なる~styleを適用することが要求される ⇒＃ `focus$ps 疑似類（通常は `outline^p ~propを利用して）, `selection$pe 疑似要素（選定された~glyphを反転色で描直すなど，適切な強調~技法を利用して） ◎ In addition, all interactive user agents are required to apply distinctive styles to the :focus pseudo-class (normally using the outline property) and the ::selection pseudo-element (using an appropriate highlighting technique, such as redrawing the selected glyphs with inverse colors).

注記： ~UA~stylesheet内の`~importantな宣言$【！!important rule】は、 `すべての利用者~style／作者~styleを上書きする＠~CASCADE#importance$ `css-cascade-4$r 。 したがって，［ `決して描画されない要素$ ／ `symbol$e 要素 ］用の `display^p 値は変更し得ない — これらのうち，次に該当するもの以外の要素は、 その子~内容も含め，直に描画されることは決してない ⇒ `symbol^e 要素は、［ 次を満たす ある~shadow根 %根 ］が在る場合に限り，描画するモノトスル ⇒ ［ %要素 は %根 の子である ］~AND［ %根 の~hostは `use$e 要素である ］~AND［ %根 の~hostは描画される ］ ◎ An !important rule in a user agent stylesheet over-rides all user and author styles [css-cascade-4]. The display value for never-rendered elements and for ‘symbol’ elements can therefore not be changed. A symbol must only be rendered if it is the direct child of a shadow root whose host is a ‘use’ element (and must always be rendered if the host ‘use’ element is rendered). The other elements, and their child content, are never rendered directly.

注記： ~CSS Transforms は， `transform-origin$p 用の初期~値を `50% 50%^v と定義しているが、 ~SVGに属する要素は，変形するときの既定の原点は ( 0, 0 ) になるモノトスル — よって、すべての~SVG要素に対し， `transform-origin$p の既定の値は `0 0^v に上書きされる （ただし、根 `svg$e 要素, `foreignObject$e 要素の子である `svg$e 要素, ~SVG名前空間に属さない要素は除く — これらの要素を変形するときの原点は中心になるモノトスル）。 `css-transforms-1$r ◎ CSS Transforms defines that the initial value for transform-origin is 50% 50%. Since elements in SVG must, by default, transform around their origin at (0, 0), transform-origin is overridden and set to a default value of 0 0 for all SVG elements (except for root ‘svg’ elements and ‘svg’ elements that are the child of a ‘foreignObject’ element or an element in a non-SVG namespace; these elements must transform around their center). [css-transforms-1]

@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;
}

6.9. 要求される~CSS特能

上に述べた特能の他にも、 ~SVG~UAは，次の~CSS特能を~supportするモノトスル： ◎ Besides the features described above, the following CSS features must be also supported in SVG user agents:

• ~XML文書~内で `~xml-stylesheet$c 処理命令を利用する外部~CSS~stylesheet。 `xml-stylesheet$r ◎ in XML documents, external CSS style sheets using the <?xml-stylesheet?> processing instruction [xml-stylesheet]

• ~stylesheetの中の［ `media$at, `import$at, `charset$at ］規則 — ~CSS_21に定義されるとおり。

  【 参考： 現在の~CSSにおけるこれらの~at-規則の定義は、 `import＠~CASCADE#at-ruledef-import$at, `media＠~CSSCOND#at-ruledef-media$at, `charset＠~CSSSYN#at-ruledef-charset$at に見られる。 額面通り受け取るなら，これらには~CSS_21に基づく取扱いが要求されることになるが、 現在の定義に従って挙動する~UAもあるかもしれない。 特に `charset^at は、 ~securityの理由から， “本物の~at-規則ではない何か” として`定義し直された＠~CSSSYN#determine-the-fallback-encoding$ — 現代の~UAは、 それに従って挙動することになろう。 】

  ◎ @media, @import and @charset rules within style sheets, as defined in CSS 2.1
• ~stylesheetの中の `font-face$at 規則 `css-fonts-3$r ◎ @font-face rules within style sheets [css-fonts-3]
• ~CSS_21に定義される すべての疑似類（次が挙げられる： `hover$ps, `link$ps, `active$ps, `visited$ps, `focus$ps, `first-child$ps, `lang()$ps ） ◎ all pseudo-classes defined in CSS 2.1 (including :hover, :link, :active, :visited, :focus, :first-child and :lang)
• ~CSS_21に定義される（ `text$e 要素~上の） `first-letter$pe, `first-line$pe 疑似要素。 ◎ the ::first-letter and ::first-line pseudo-elements defined in CSS 2.1 (on ‘text’ elements)

6.10. ~DOM~interface

[Exposed=Window]
interface `SVGStyleElement^dfn : `SVGElement$I {
  attribute DOMString `type$m;
  attribute DOMString `media$m;
  attribute DOMString `title$m;
};

`SVGStyleElement$I includes `LinkStyle$I;