1. 序論
~SVGは、 ~CSSで~style可能である — この能力は、 ~HTML内に~inlineに利用するとき ごく有用になり得る。 例えば，~SVG~iconは、 利用者が それを~hoverしているか否かに基づいて，異なる色をとれる — それに `fill$p ~propを変更する `hover$ps 規則を適用するだけで。 ◎ SVG is stylable with CSS, and when used inline in HTML, this capability can be very useful. For example, an SVG icon can take on a different color based on whether the user is hovering it or not, just by applying a :hover rule to it that changes the fill property.
~SVG画像が［ 外縁~pageからの［ `選択子$／`継承$ ］を自身に適用することを許容しない仕方 ］で参照されるときには （ ~HTML内の［ `img$e ／ `iframe$e ］を介して それを埋込むなど）、 この機能性は失われる。 そのような “外部” ~SVG画像の表示を変更するための仕方は、 一連の画像を生産して，どの画像を参照するか変更する他にない。 そのようにした場合、 新たな資源が~downloadされるに伴い，当の~pageは遅延を被ることに加え、 ~CSS遷移の様な動的な効果は許容されない。 ◎ When the SVG is referenced in a way that doesn’t allow selectors or CSS inheritance from the outer page to apply to it (such as embedding it via img or iframe in HTML), though, this functionality is lost. The only way to change the display of such "external" SVG images is to produce several of them, and change which image you’re referencing. This incurs delay on the page as a new resource is downloaded, and disallows dynamic effects like CSS Transitions.
~CSS `~link~parameter@ は、 “外部” 資源に対し［ ~CSS~propにより， あるいは~URLの特別な素片~schemeを通して ］`~custom~prop$を設定するための仕方を与える。 これは、 “~inlineな” ~SVG画像が有する~custom化~能を成す — 制限されるが，強力な — 下位集合を “外部” ~SVG画像に与える。 ◎ CSS link parameters are a way to set CSS custom properties on an "external" resource, either by a CSS property or thru a special fragment scheme on the URL. This gives a limited, but powerful, subset of the customizability that "inline" SVG images have to "external" SVG images.
2. ~link~parameterの設定-法
外部~資源には、 `~link~parameter$たちが成す~mapを付随させれる — 各~entryは、［ ~keyとして`~custom~prop名^, 値として `any-value$t ］で構成される。 ◎ An external resource can be accompanied by a map of link parameters, each entry composed of a custom property name as a key, and an <any-value> as the value.
`~link~parameter$を指定する仕方には、 次に挙げる 3 種がある： ◎ There are three ways to specify a link parameter:
-
`link-parameters$p ~propを介して — それは、 次に挙げるものに適用される：
- 当の要素が外部~資源を表現するならば，それ
- 当の要素の~propに利用されるすべての外部~資源
- 外部~資源の~URLを成す素片~部位における特別な構文を介して ◎ via a special syntax in the fragment portion of the URL of an external resource
- `url$f 構文における `param^f 引数を介して ◎ via a param() argument in the url() syntax
これら複数の仕方で指定された場合、 すべての`~link~parameter$が組合される。 複数の入力内に同じ~keyが現れる場合、 上に挙げた最後の~sourceほど優先される （すなわち、 `url("..." param())^v, ~URL素片, `link-parameters$p の順に）。 ◎ If specified in multiple of these ways, all of the link parameters are combined. If the same key appears in multiple inputs, the latest source in the above list wins (that is, URL fragment beats link-parameters, and url("..." param()) beats URL fragment).
`~link~parameter$が，~linkされた資源にどう波及するかは、 以下の各~下位~節にて定義される。 ◎ The influence of link parameters on the linked resource is defined in the next section.
2.1. ~CSSを介した設定-法： `link-parameters$p ~prop
◎名 `link-parameters@p ◎値 `none$v | `link-param$t+ ◎初 `none$v ◎適 すべての要素, すべての疑似要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 離散的 ◎表終`link-parameters$p ~propは、 次に挙げるものに`~link~parameter$を設定する仕方を成す： ◎ The link-parameters property is one way to set link parameters＼
- 要素が外部~資源を表現しているならば （~HTML `img$e や `iframe$e など）、 その資源。 ◎ on the element itself (if it is an element representing an external resource, such as an HTML img or iframe),＼
- ~CSSを介して要素に指定された すべての外部~資源（背景~画像, 等々）。 ◎ and on all external CSS resources specified on the element (such as background images, etc).＼
各種~値の意味は： ◎ Its values are:
- `none@v
- 指定される`~link~parameter$は無い。 ◎ No link parameters specified.
- `link-param$t+
- `~link~parameter$たちが成す空でない~list。 同じ名前（ `custom-property-name$t ）を伴う複数個の`~link~parameter$が指定された場合、 最後のものが優先される。 ◎ A list of one or more link parameters. If two link parameters with the same name are specified with the same <custom-property-name>, the last one wins.
`link-param@t = param( `custom-property-name$t `declaration-value$t? )
各 `link-param$t は、 ~keyとして `custom-property-name$t を伴う`~link~parameter$を表現する。 当の`~link~parameter$の値は、 `declaration-value$t が［ 指定されたならば，それ／ 省略されたならば，当の要素の［ ~keyと同じ名前の`~custom~prop$ ］の値 ］になる。 ◎ A <link-param> represents a link parameter, with a key of the <custom-property-name>. If the <declaration-value> is specified, that’s the value of the link parameter. If omitted, the value of the custom property of the same name on the element is the value of the link parameter.
2.2. ~URLを介した設定-法
外部~資源を参照するために利用される~URLの`素片$urlにおいては、 既存の`~SVG素片~識別子＠~SVGlinking#svg-fragment-identifier$【！SVG 1.1 ~SVG11/linking.html#LinksIntoSVG】に類似な，特別な “素片~識別子” として `~SVG~parameter素片~識別子@ を利用できる — その構文は： ◎ A special "fragment identifier" can be used in the fragment of a URL used to reference an external resource. Several examples of existing "fragment identifiers" for SVG documents can be found in the SVG 1.1 specification. ◎ The syntax of an SVG parameter fragment identifier is:
param( `custom-property-name$t `declaration-value$t )
【 `link-param$t と違って， `declaration-value^t は省略可能でない。 】
（これは、 【~SVGの `SVGFragmentIdentifier＠~SVGlinking#_SVGFragmentIdentifier$c 用の構文ではなく，】 ~CSSの`値~定義の構文$を利用する。） ◎ (using the CSS value definition syntax;＼
この構文~用に，実際の構文解析器を定義する。 ◎ TODO define an actual parser for it).
例えば、 当の画像を `http://example.com/image.svg#param(--text-color%20blue)^l の様な~URLで参照することで， ~SVG画像の `--text-color^p `~custom~prop$を `blue$v に設定できる。 ◎ For example, to set the "--text-color" custom property of an SVG image to blue, one can reference the image with a url like “http://example.com/image.svg#param(--text-color%20blue)”.
複数個の~parameterを画像へ渡す場合、 同じ個数の `param^f 関数を~URLに付加する必要がある【！must】。 複数の `param^f 関数が同じ `custom-property-name$t を指定する場合、 当の`~custom~prop$は，最後のそれの値に設定される。 ◎ If passing multiple parameters to an image, additional param() functions must be appended to the URL. If multiple param() functions specify the same <custom-property-name>, the custom property is set to the value of the last one.
例えば，前の例の画像が `--bg-color^p `~custom~prop$も利用していた場合、 次の様な~URLで参照することもできる ⇒ `http://example.com/image.svg#param(--text-color%20blue)param(--bg-color%20white)^l ◎ For example, if the image from the previous example also used a "--bg-color" custom property, it could be referenced with a url like “http://example.com/image.svg#param(--text-color%20blue)param(--bg-color%20white)”.
注記： ~spaceその他のある種の【！some】文字は、 ~CSS構文においては妥当であっても， ~URLにおいては【！technically】妥当でないかもしれない。 一部の文脈においては、［ 妥当な~URLを形成するよう，それらの文字を~escapeする必要がある ］かもしれない。 ほとんどの事例 — ~HTMLの `a$e 要素【の `href^a 属性】や ~CSSの `url$f 関数など — では、 ~spaceは受容され，~escapeする必要はないが。 ◎ Note: Spaces, and some other characters that might be valid in CSS syntax, are not technically valid in URLs. In some contexts, you might need to escape those characters to form a valid URL. In most cases, though, such as HTML’s a element or CSS’s url() function, spaces are accepted and do not need to be escaped.
2.3. `url^f 関数を介した設定-法
外部~資源を `url$f 関数などの~CSSを介して参照するとき，共通的に求まれる利用事例は、 当の~pageの自前の`~custom~prop$の値を当の資源へ — 例えば、 その値を~SVG画像の呈示に反映させるために — 渡すことだが， ~custom~propの値を `url^f 関数へ渡す~URLの中へ統合する仕方は無い。 ◎ When referencing an external resource via CSS, the param() function can be used in the url() function. But a common use-case is passing in values of the page’s own custom properties; for example, a page might use a --primary-color custom property, and want to make an SVG image match. There’s no way, however, to integrate the value of a custom property in CSS into the URL passed to the url() function.
そのような利用事例を収容するため、 `link-param$t を `url$t を成す妥当な `url-modifier$t として利用できる。 ◎ To accommodate this, a <link-param> is a valid <url-modifier>.
複数の `link-param$t 内に同じ `custom-property-name$t が指定された場合、 `~link~parameter$を指定する他の~methodと同じく，最後のものが優先される。 ◎ As in the other methods of specifying link parameters, if the same <custom-property-name> is specified in several <link-param>s, the last one wins.
例えば、 ある~siteが `--primary-color^p ~custom~propを~pageの~theme色に利用していて， それを `--color^p ~custom~propを利用している~SVG背景に反映させるよう求める場合、 次のように書くこともできる： ◎ For example, if the site is using a --primary-color custom property to theme its elements with, and wanted an SVG background using a --color custom property to reflect it, it could write:
.foo {
background-image: url("http://example.com/image.svg" param(--color var(--primary-color)));
}
3. ~link~parameterの利用-法
ある~linkに`~link~parameter$たちが指定され， ~linkされた外部~資源は~CSSを解するならば （例： ~SVGや~HTML文書）、 当の資源における`~custom~prop$のうち［ その名前は，渡された~link~parameter~mapを成す ある~keyに等しいもの ］の初期~値は，当の~keyに対応する値に設定される。 ◎ When an external resource link has one or more link parameters specified, if the linked resource understands CSS (such as an SVG or HTML document), then the initial value of custom properties with names equal to the keys of the link parameters map is set to the corresponding values of the map.
ある`~custom~prop$に対し，その名前を伴う `property$at 規則が指定された場合でも、 当の~propの初期~値には，`~link~parameter$にて指定された値が利用される — 当の規則にて指定された初期~値ではなく。 ◎ If an @property rule is specified for one of the custom property names in the link parameters, the link parameter value is used for the initial value, rather than the @property-specified initial value.
【 この［ `登録-済み~custom~prop$用の要件 ］は、 ~JSを介して登録されたそれにも適用されるかもしれない （はっきりしない）。 】
~linkされた資源は~CSSを解さない場合 （~PNG画像など）、 `~link~parameter$による効果は無い。 ◎ If the linked resource does not understand CSS (such as PNG images), then link parameters have no effect.
［ ~linkされた資源が~link~parameterとして何を許容するか ］を指定するための仕方を定義する — 許容されない場合、 ~link~parameterは無視されるよう。 非同一-生成元な `iframe^e 等々用には，既定では`何も許容しない^emようにして、 同一-生成元（および非同一-生成元な "画像として” の~SVG）用には， 既定では`すべて許容する^emようにする。 ◎ Define a way for the linked resource to specify what link parameters they allow. For cross-origin iframes/etc, this will default to nothing; for same-origin (or cross-origin "SVG as image"), it defaults to "everything". If not allowed, the link parameter is ignored.
例えば，ある~SVG画像が `--color^p ~parameterを公開するよう求めた場合、 次の様に利用することもできる： ◎ For example, if an SVG image wanted to expose a --color parameter, it could use it like:
<svg>
<g style="fill: var(--color);">
<path d="..." />
</g>
</svg>
注記： ~parameterが与えられなかった場合でも，~SVG画像を — 各~custom~prop用に “既定の値” を供することにより — 利用-可能にすることは、 通例的に良い案になる。 これを行う仕方にはいくつかある： ◎ It’s usually a good idea to make your SVG image usable even if no parameters are given, by providing "default values" for each of the custom properties. There are several ways to do this.
-
各 `var$f 関数に~fallback値を供する
—
`fill$p: `var(--color, blue)^vの様に。 ◎ On each var() function, provide a fallback value, like fill: var(--color, blue). -
前項の仕方では面倒事になるまでに，当の`~custom~prop$が何度も利用される場合、 当の~custom~propを異なる名前で格納して， 既定では それを呼出すようにする — 次の様に： ◎ If the custom property is going to be used a lot, such that providing a fallback for each individual var() is troublesome, store the custom property in a different name while invoking the default, like:
:root { --color2: var(--color, blue); }この例における `--color2^p は、［ `--color^p の値が`~link~parameter$【！`~SVG~parameter^】を介して供された場合は，それ／ 他の場合は，既定の値 `blue$v ］を受取ることになる。 どちらの事例でも、 `--color2^p は常に値を有することが~~保証され， 当の~SVG画像の~stylesheet内で無条件に利用できる。 ◎ In this example, if --color is provided via an SVG parameter, --color2 will receive its value. If not, it will recieve the default blue value. In either case, --color2 can be used in the SVG image’s stylesheet unconditionally, secure in the knowledge that it will always have a value.
-
`CSS-VARIABLES$r の将来~levelにおいては、 前項の示唆を もっと利用し易くするため， 何らかの “親の値” 機能性が可用にされることになる： ◎ In a future level of the Custom Properties specification [CSS-VARIABLES], some "parent’s value" functionality will be available to make the previous suggestion more usable:
:root { --color: var(parent --color, blue); }（この構文は、 例であり，最終的なものではない。） ◎ (This is an example syntax, and is not yet final.)
親の `--color^p ~propの値（根~要素においては，初期~値を指す）を呼出すことにより、 作者は，`~custom~prop$の名前を同じに維持しながら自己-参照~loopを避けれるようになる。 ◎ By invoking the value of the --color property on the parent (which, on the root element, refers to the initial value), an author can avoid self-reference loops while retaining the same custom property name.