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 1.1 においては要求されていなかったが,~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 要素

~SVG-2要件: ~HTML `style$eH 要素の各種~属性を~SVGの `style$e 要素に追加する。 ◎ SVG 2 Requirement: Add HTML5 ‘style’ element attributes to SVG's ‘style’ element.

  • 解決: ~SVG-2 `style^e 要素は ~HTML `style^eH 要素に倣うものとする (`http://www.w3.org/2011/10/28-svg-irc#T18-45-45$refer)。 ◎ Resolution: SVG 2 ‘style’ element shall be aligned with the HTML5 ‘style’ element.
  • 目的: 作者を惑わすことのないよう、`style^e 要素の挙動を[ ~HTML内容, ~SVG内容 ]において一致させる。 ◎ Purpose: To not surprise authors with different behavior for the ‘style’ element in HTML and SVG content.
  • Owner: Cameron (`3277$ACTION)

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

◎要素名 `style@e ◎分類 `決して描画されない要素$ ◎内容 文字~data ◎属性 `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `type$a, `media$a, `title$a ◎界面 `SVGStyleElement$I ◎表終 ~attrdef
◎属名 `type@a ◎属値 (下を見よ) ◎属初 `text/css^l ◎属ア 不可 ◎表終 ◎ Name Value Initial value Animatable type (see below) text/css no
この属性は、要素の内容の~stylesheetの言語を ~MIME型 `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 として構文解析される。 指定されていない場合、~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.

注記: ~HTML `link$eH 要素を利用せずに,外部~stylesheetを参照する別法として、~inline~stylesheet内に `import^at 規則を利用する仕方もある。 例えば: ◎ Note that an alternative way to reference external style sheets without using the HTML ‘link’ element is to use an @import rule in an inline style sheet. For example:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    @import url(mystyles.css);
  </style>
  <rect .../>
</svg>

は、次と同様に挙動することになる: ◎ would behave similarly to:

<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文書においては、 `~xml-stylesheet$c 処理命令 `xml-stylesheet$r を利用して外部~CSS~stylesheetを含めてもヨイ。 ◎ Or, in XML documents, external CSS style sheets may be included using the <?xml-stylesheet?> processing instruction [xml-stylesheet].

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.

~attrdef
◎属名 `class@a ◎属値 `空白区切りの~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^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における対応する属性と同じになるモノトスル。 ◎ 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.

次の例では、文書~messageを~markupするために, `text$e 要素に `class$a 属性が併用されている。 ~messageは ~English, ~French 両~versionで現れる。 ◎ In the following example, the ‘text’ element is used in conjunction with the ‘class’ attribute to markup document messages. Messages appear in both English and French versions.

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

次の~CSS~style規則は、色を[ 情報的 ( `.info^css )~messageは~green, 警告( `.warning^css )~messageは~yellow, ~error( `.error^css )~messageは~red ]で表示するよう視覚的な~UAに伝えることになる: ◎ The following CSS style rules would tell visual user agents to display informational messages in green, warning messages in yellow, and error messages in red:

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

`style$a 属性を利用して, `text$e 要素を前の例と同様に~styleできる様子を示す例: ◎ This example shows how the ‘style’ attribute can be used to style ‘text’ elements similarly to the previous example:

<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 として寄与する — 他のどの作者~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 宣言は、それを`無効な値$にする。 呈示~属性がどう構文解析されるかの詳細は 属性~構文 を見よ。 ◎ 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呈示~属性は、既存の属性と名前が衝突しない所では,~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名と同じ小文字並びになる — 以下の表~内にて `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.

呈示~属性を伴う~prop ◎ Properties with a presentation attribute 対応する呈示~属性を~supportする要素 ◎ Elements that support the presentation attribute
`cx$p, `cy$p `circle$e, `ellipse$e
`height$p, `width$p, `x$p, `y$p `foreignObject$e, `image$e, `rect$e, `svg$e, `symbol$e, `use$e
`r$p `circle$e
`rx$p, `ry$p `ellipse$e, `rect$e
`d$p `path$e
`fill$p ~SVG名前空間に属する~~任意の要素 — ただし、`~animation要素$は,異なる `fill$a 属性があるので除く。 ◎ Any element in the SVG namespace except for animation elements, which have a different ‘fill’ attribute.
`transform$p

歴史的な理由から, `transform$p ~prop `css-transforms-1$r は、それが適用される~SVG要素に依存して,異なる名前の呈示~属性により表現される: ◎ For historical reasons, the transform property gets represented by different presentation attributes depending on the SVG element it applies to:

  • `pattern$e 要素~上では `patternTransform$a に対応付けられる
  • [ `linearGradient$e / `radialGradient$e ]要素~上では `gradientTransform$a に対応付けられる
  • ~SVG名前空間に属する他の要素~上では、そのまま `transform^a に対応付けられる
◎ gradientTransform ◎ ‘linearGradient’ and ‘radialGradient’ elements. ‘gradientTransform’ gets mapped to the transform CSS property [css-transforms-1]. ◎ For historical reasons, the transform property gets represented by different presentation attributes depending on the SVG element it applies to: ◎ transform • Any element in the SVG namespace with the exception of the ‘pattern’, ‘linearGradient’ and ‘radialGradient’ elements. ‘patternTransform’ • ‘pattern’. ‘patternTransform’ gets mapped to the transform CSS property [css-transforms-1]. ‘gradientTransform’ • ‘linearGradient’ and ‘radialGradient’ elements. ‘gradientTransform’ gets mapped to the transform CSS property [css-transforms-1].
`alignment-baseline$p, `baseline-shift$p, `clip-path$p, `clip-rule$p, `color$p, `color-interpolation$p, `color-interpolation-filters$p, `cursor$p, `direction$p, `display$p, `dominant-baseline$p, `fill-opacity$p, `fill-rule$p, `filter$p, `flood-color$p, `flood-opacity$p, `font-family$p, `font-size$p, `font-size-adjust$p, `font-stretch$p, `font-style$p, `font-variant$p, `font-weight$p, `glyph-orientation-horizontal$p, `glyph-orientation-vertical$p, `image-rendering$p, `letter-spacing$p, `lighting-color$p, `marker-end$p, `marker-mid$p, `marker-start$p, `mask$p, `mask-type$p, `opacity$p, `overflow$p, `paint-order$p, `pointer-events$p, `shape-rendering$p, `stop-color$p, `stop-opacity$p, `stroke$p, `stroke-dasharray$p, `stroke-dashoffset$p, `stroke-linecap$p, `stroke-linejoin$p, `stroke-miterlimit$p, `stroke-opacity$p, `stroke-width$p, `text-anchor$p, `text-decoration$p, `text-overflow$p, `text-rendering$p, `transform-origin$p, `unicode-bidi$p, `vector-effect$p, `visibility$p, `white-space$p, `word-spacing$p, `writing-mode$p ~SVG名前空間に属する~~任意の要素。 ◎ Any element in the SVG namespace.

注記: [ `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に加えて,次の表に挙げる~propを~supportするモノトスル: ◎ The following properties must be supported by all SVG user agents: ◎ all properties defined in this specification

~prop 仕様
`display$p, `overflow$p, `visibility$p ◎ the display, overflow and visibility properties `CSS2$r
`cursor$p ◎ ↓ `css-ui-3$r
`text-overflow$p ◎ the cursor and text-overflow property `css-overflow-3$r
`clip-path$p, `clip-rule$p, `mask$p ◎ the clip-path, clip-rule and mask properties `css-masking-1$r
`color$p, `opacity$p ◎ the color and opacity properties `css-color-3$r
`color-interpolation-filters$p, `filter$p, `flood-color$p, `flood-opacity$p, `lighting-color$p ◎ the color-interpolation-filters, filter, flood-color, flood-opacity and lighting-color properties `filter-effects-1$r
`isolation$p ◎ the isolation property `compositing-1$r
`transform$p, `transform-box$p, `transform-origin$p ◎ the transform, transform-box and transform-origin properties `css-transforms-1$r
`letter-spacing$p, `text-align$p, `text-align-last$p, `text-indent$p, `word-spacing$p ◎ the letter-spacing, text-align, text-align-last, text-indent and word-spacing properties `css-text-3$r
`white-space$p ◎ the white-space property `css-text-4$r
`vertical-align$p, `dominant-baseline$p, `alignment-baseline$p, `baseline-shift$p ◎ the vertical-align, dominant-baseline, alignment-baseline, and baseline-shift properties `css-inline-3$r
`direction$p, `text-orientation$p, `writing-mode$p ◎ the direction, text-orientation and writing-mode properties `css-writing-modes-3$r
`font$p, `font-family$p, `font-feature-settings$p, `font-kerning$p, `font-size$p, `font-size-adjust$p, `font-stretch$p, `font-style$p, `font-variant$p (および その各種 下位prop), `font-weight$p ◎ the font, font-family, font-feature-settings, font-kerning, font-size, font-size-adjust, font-stretch, font-style, font-variant (along with its subproperties) and font-weight properties `css-fonts-3$r
`text-decoration$p, `text-decoration-line$p, `text-decoration-style$p, `text-decoration-color$p ◎ the text-decoration, text-decoration-line, text-decoration-style and text-decoration-color properties `css-text-decor-3$r

6.8. ~UA~stylesheet

次の~UA~stylesheetは、すべての~SVG~UAに適用されるモノトスル: ◎ 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;
}

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$css 規則は、 すべての利用者~style/作者~styleを上書きする `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]

注記: ~OpenType仕様 `OPENTYPE$r からは、 追加的な~UA~stylesheet を適用することが要求される — それは、次で与えられる: ◎ The OpenType specification requires an additional user agent style sheet to be applied when processing [OPENTYPE]. It is as follows:

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

~keyword[ `context-fill$v, `context-stroke$v ]は、ある~fontの~glyph用の`文脈~要素$が`~text内容~要素$に対応している所では,この仕様の定義に従う。 他の~keywordは、~OpenType仕様の定義に従う — それは、座標系における変化に対する適切な調整を伴う下で,`~text内容~要素$からの~style値が~font~glyphへ伝播されることを確保する。 `OPENTYPE$r ◎ The context-fill and context-stroke keywords are as defined in this specification, where the context element for a font glyph is the corresponding text content element. The other keywords are as defined in the OpenType specification, and ensure that the style values from the text content element are propagated to the font glyphs, with appropriate adjustments for the change in the coordinate system [OPENTYPE].

6.9. 要求される~CSS特能

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

6.10. ~DOM~interface

6.10.1. ~interface `SVGStyleElement^I0

`SVGStyleElement$I ~objは ~DOM内の `style$e 要素を表現する。 ◎ An SVGStyleElement object represents a ‘style’ element in the DOM.

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

`SVGStyleElement$I includes `LinkStyle$I;
`type@m
`media@m
`title@m
これらの~IDL属性は,順に[ `type$a, `media$a, `title$a ]内容~属性を`反映する$。 ◎ The type, media and title IDL attributes reflect the ‘type’, ‘media’ and ‘title’ content attributes, respectively.