CSS 塗りつぶしとストローク・モジュール レベル 3

1. 導入

形状を定義するテキストおよび SVG グラフィック要素—path 要素や、 rect などの基本図形—は、 塗りつぶされること、 すなわちオブジェクトの内部を描画すること、および ストロークされること、 すなわちオブジェクトの輪郭に沿って描画することによってレンダリングされる。

この仕様は、要素の塗りつぶしおよびストロークの外観と形状を制御する多数のプロパティを 定義することにより、テキストおよび SVG グラフィック要素がどのように塗りつぶされ、 ストロークされるかを説明する。

SVG2 からのペイントの指定を挿入する。

テキスト装飾を扱う。 課題および別の課題を参照。

2. ペイント

ペイントは、抽象的な幾何形状を可視にするものである。 これは色、パターン、画像、グラデーション、およびその他の 2D グラフィックから構成される。 <color> 型は 0 次元ペイントを表す。 これは [CSS3-COLOR] で定義される。 <paint> 型は 2 次元ペイントを表し、 その構文は次のとおりである:

<paint> = none | <image> | <svg-paint>

none

ペイントが適用されないことを示す。

<image>

[CSS3-IMAGES] で定義され、画像参照およびグラデーションを含む。

<svg-paint>

SVG ペイントサーバーを参照し、 §2.1 SVG 固有のペイントで定義される。

2.1. SVG 固有のペイント

<svg-paint> = child | child( <integer> )

child

ペイントされる要素の最後の子ペイントサーバー要素を 参照する。

そのような子が存在しない場合、 none として振る舞う。

child(<integer>)

この関数記法は、 引数として正の整数を受け取り、 ペイントされる要素の n 番目の子ペイントサーバー要素 （::nth-child() と同様に 1 始まり）を参照する。

そのような子が存在しない場合、 none として振る舞う。

1 未満の引数は無効である。

context-fill および context-stroke は仕様に組み込む必要があるが、 それらは <paint> 値としてではなく、 個々の stroke および fill サブプロパティのキーワードとして属する。 より多くの WG 議論と、 これが保持される SVG2 機能であることの確認が必要であり、 その後でそれに対する比較的大きな編集を行う。

CSS Images 4 §3.4.1 ペイントソースは、 SVG ペイントサーバーの座標空間の扱い方を定義している。 ここにコピーするか、参照するか、それとも別の何かか。

3. 塗りつぶし

塗りつぶしは、 SVG 図形の輪郭の内側、またはインライン（または SVG テキスト）ボックスのグリフの内側を描画する。 背景 [CSS3BG] と同様に、塗りつぶしは単色（fill-color） および/または画像パターン（fill-image など）にできる。

fill 一括指定を用いて 塗りつぶしを設定することを強く推奨する。 個々のペイント用ロングハンドは、 個別の側面を変更する必要がある場合にのみ用いるべきである。

box-decoration-break、fill-break、および stroke-break の一括指定である box-break プロパティを追加するか?

3.1. 複数の塗りつぶしの重ね合わせ

ボックスの塗りつぶしは、複数のレイヤーを持つことができる。 レイヤーの数は、fill-image プロパティのカンマ区切り値の数によって決定される。 none の値も依然としてレイヤーを作成する。

リスト値を持つプロパティは、背景画像の場合と完全に同じように相互作用する。 これは CSS Backgrounds 3 §3.1 複数の 背景画像の重ね合わせで定義される。

3.2. 塗りつぶしの幾何形状

3.2.1. SVG 図形の巻き規則: fill-rule プロパティ

fill-rule プロパティは、 キャンバスのどの部分が形状の内側に含まれるかを決定するために用いられる規則を示す。 単純で交差しないパスについては、 どの領域が「内側」にあるかは直感的に明らかである。 しかし、自身と交差するパスや、 あるサブパスが別のサブパスを囲むような、より複雑なパスでは、 「内側」の解釈はそれほど明白ではない。

fill-rule プロパティは、形状の内側をどのように 決定するかについて 2 つの選択肢を提供する:

nonzero

この規則は、キャンバス上の点の「内側性」を、 その点から任意の方向の無限遠へ光線を引き、 その光線と形状のセグメントが交差する箇所を調べることによって決定する。 ゼロのカウントから開始し、 パスセグメントが光線を左から右へ横切るたびに 1 を加え、 右から左へ横切るたびに 1 を減じる。 交差を数えた後、 結果がゼロであれば、その点はパスの外側にある。 そうでなければ、内側にある。

evenodd

この規則は、キャンバス上の点の「内側性」を、 その点から任意の方向の無限遠へ光線を引き、 その光線が指定された形状のパスセグメントを横切る数を数えることによって決定する。 この数が奇数であれば、 その点は内側にあり、 偶数であれば、 その点は外側にある。

注: 上記の説明は、 パスセグメントが光線と一致する場合、または光線に接する場合にどうするかを指定していない。 どの光線でもよいため、 そのような問題のある交差を持たない別の光線を単に選択すればよい。

このプロパティはテキスト （SVG であるか CSS であるかを問わない） には適用されない。 テキストグリフの「内側」は本質的に定義されているためである。

これはレイヤー化されるべきか?

3.2.2. 断片化された塗りつぶし: fill-break プロパティ

このプロパティは、断片化されたボックスの幾何形状を、 塗りつぶしに対してどのように扱うかを指定する。

値の意味は次のとおりである: COPY FROM FRAGMENTATION

3.3. 塗りつぶしペイント

3.3.1. 塗りつぶし色: fill-color プロパティ

このプロパティは、要素の塗りつぶし色を設定する。 この色は、任意の塗りつぶし画像の背後に描画される。

作者は、テキストの色を設定するために、 color プロパティを fill-color ではなく用いることが推奨される。

background-color と異なり、 塗りつぶし色は、fill-image の最終レイヤーが none または無効な画像である場合にのみ描画されなければならない。 それが有効な 画像である場合、 塗りつぶし色は描画されてはならない。

注: これは SVG の fill プロパティの旧来の挙動と一致させるために必要である。 その挙動では、単一レイヤー画像構文に「フォールバック色」が組み込まれていた。 CSS では、これは image() 関数によってよりよく達成され、 フォールバックを明示的にする。

fill-color は stroke-color のようにレイヤー化されるべきであり、 そうすることで 2 つのプロパティ集合の一貫性を最大化できる。

SVG ユーザーエージェントは、 次の規則（またはその同等物）を ユーザーエージェント スタイルシートに含めなければならない:

@namespace svg "http://www.w3.org/2000/svg";
svg:svg:root, *|*:not(svg|*) > svg:svg {
  fill-color: black;
}

3.3.2. 塗りつぶし画像ソース: fill-image プロパティ

このプロパティは、要素の塗りつぶし画像を設定する。 画像は、最初に指定されたものを最前面（ユーザーに最も近い位置）に描画し、 後続の各画像は前の画像の背後に描画される。 値は background-image と同一に解釈される。 必要な変更を加えた上で。

3.3.3. 塗りつぶしの配置領域: fill-origin プロパティ

このプロパティは、塗りつぶしの座標系を指定し、 塗りつぶし 配置領域を設定する。 値の意味は次のとおりである:

match-parent

親と同じ塗りつぶし配置領域を用いる。 親がない場合は、初期包含ブロックを用いる。

content-box

padding-box

border-box

ボックス自身の content-box/padding-box/border-box を塗りつぶし配置領域として用いる。 SVG 図形については、content-box および padding-box は fill-box として扱われ、 一方 border-box は stroke-box として扱われる。

fill-box

SVG 図形または SVG テキストについては、 要素のオブジェクト 境界ボックスを用いる。 CSS ボックスについては、 要素およびすべてのインフローまたは浮動する子孫の テキストグリフ輪郭の境界ボックスを用いる。

stroke-box

SVG 図形または SVG テキストについては、 要素のストローク 境界ボックスを用いる。 CSS ボックスについては、 要素およびすべてのインフローまたは浮動する子孫の テキストグリフのストローク輪郭の境界ボックスを用いる。

SVG UA スタイルシートは、次の規則を含むように修正される:

svg:svg {
  fill-origin: content-box;
}

塗りつぶしペイント領域のサイズは無限である。 ペイント時、 塗りつぶし色/画像は、影響を受けるテキストのグリフ領域、 または影響を受ける SVG 図形の塗りつぶし幾何形状と交差させられる。

SVG ペイントサーバーは *Units 属性内に独自の生成元情報を持ち回るが、 SVGWG は、CSS の生成元に注意を払わせる新しい値を追加できるかもしれない。 あるいは、ここに auto 初期値を追加できる。 これは、ペイントサーバーを参照している場合には ペイントサーバーの情報に委ね、 そうでない場合は match-parent になる。

3.3.4. 塗りつぶし画像の配置: fill-position プロパティ

塗りつぶし画像が指定されている場合、 このプロパティは、それらの初期位置 （任意のサイズ変更後）を、 対応する塗りつぶし配置領域内で指定する。 値は background-position と同一に解釈される。 必要な変更を加えた上で。

3.3.5. 塗りつぶし画像のサイズ指定: fill-size プロパティ

塗りつぶし画像のサイズを指定する。 値は background-size と同一に解釈される。 必要な変更を加えた上で。

3.3.6. 塗りつぶし画像のタイル化: fill-repeat プロパティ

サイズ指定および配置の後、塗りつぶし画像をどのようにタイル化するかを指定する。 値は background-repeat と同一に解釈される。 必要な変更を加えた上で。

3.3.7. 塗りつぶし一括指定: fill プロパティ

このプロパティは、すべての塗りつぶしペイントプロパティ—fill-color, fill-image, fill-origin, fill-position, fill-size, および fill-repeat—を 1 つの宣言で設定する 一括指定である。 省略された値は初期値に設定される。 ただし、省略された fill-color は transparent に設定され、 省略された fill-origin は fill-box に設定される。

この一括指定によって設定される場合、 fill-origin の既定値は何であるべきか? content-box か fill-box か? fill-box は Zapfino のような装飾的/はみ出すフォントにはよりよく機能するが、 content-box よりも計算コストがはるかに高い。

SVG には特殊な色の フォールバック構文がある—画像の後に続く色は、画像が失敗した場合にのみ描画される。 これは background と一致させたいという要求と衝突する。 なぜなら fill: url(#foo) red; は red で塗りつぶしてから #foo を描画する、ということをしないためである。 妥協案: fill-color はフォールバック色であるが、 none と無効な画像の両方がフォールバックを発動する。 そのため fill: url(#foo) red; は、#foo が存在しない場合にのみ red を描画する（SVG と同様）。 しかし fill: url(#foo), red（最後のレイヤーで none red と同等）は、 red および #foo を描画する（background と同様）。

3.4. 塗りつぶしの透明度

3.4.1. 塗りつぶしの不透明度: fill-opacity プロパティ

fill-opacity プロパティは、要素を塗りつぶすために用いられる ペイント操作の不透明度を指定する。 opacity と同様に、 0 または 0% の値は完全に透明であることを意味し、 1 または 100% の値は完全に不透明であることを意味する。

4. ストローク（輪郭線）

ストロークは、 SVG 図形の輪郭、またはインライン（または SVG テキスト）ボックスのグリフに沿って境界を描画する。 結果として得られる領域は、塗りつぶし領域と同様に塗りつぶすことができる。ストロークは、 単色（stroke-color）および/または画像パターン（stroke-image など）にできる。

stroke 一括指定を用いて ストロークを設定することを強く推奨する。 個々のペイント用ロングハンドは、 個別の側面を変更する必要がある場合にのみ用いるべきである。

既定では、ストロークは塗りつぶしの上に描画される。 SVG テキストまたは SVG 図形では、 描画順序は paint-order プロパティによって制御される。

paint-order は SVG ではないテキストにも適用されるべきか?

4.1. 複数のストロークの重ね合わせ

ボックスのストロークは、複数のレイヤーを持つことができる。 レイヤーの数は、 stroke-image プロパティのカンマ区切り値の数と、 stroke-color プロパティのカンマ区切り値の数のうち、 大きい方によって決定される。 none の値も依然としてレイヤーを作成する。

2 つのプロパティの長さが異なる場合、 値は末尾から揃えられ、 stroke-color の欠落した先頭値は transparent を既定値とし、 stroke-image の欠落した先頭値は none を既定値とする。

リスト値を持つプロパティは、背景画像の場合と完全に同じように相互作用する。 これは CSS Backgrounds 3 §3.1 複数の 背景画像の重ね合わせで定義される。

stroke-color は transparent で先頭側を補完しなければならない。 そうしなければ、画像の読み込みに失敗したときに、複数の画像レイヤーがランダムに単色へフォールバックすることになる。 ストロークおよび塗りつぶし全般で初期値による先頭補完を行いたいのか、 それともこれらの残りのプロパティは背景と同様にリストを反復すべきなのか?

4.2. ストロークの幾何形状

現在、SVGWG の決議に従い、 ストロークペイントプロパティおよび stroke-width を レイヤー化している。 他の幾何プロパティもレイヤー化すべきか? それらにも同様のユースケースがあるが、 ややニッチであり、 API の一貫性は重要である。 実装/テストの労力に値するか? 難しい事例: stroke-dasharray。 なぜなら "commas anywhere lol" 構文を持つためである。

4.2.1. ストロークの太さ: stroke-width プロパティ

このプロパティは、輪郭上のストロークの幅を指定する。 値が 0 の場合、そのレイヤーにはストロークは描画されない。 負の値は無効である。

拡大縮小済みビューポート サイズは、ビューポートの幅と高さの幾何平均である。

4.2.2. ストロークの配置: stroke-align プロパティ

このプロパティは、作者がストロークを輪郭に沿って揃えることを可能にする。

center

各サブパスのストロークは、 輪郭上で中央揃えされる。

inset

各サブパスのストロークは、 輪郭の「内側」 （塗りつぶし領域内）に位置する。

stroke-linejoin プロパティは無視されなければならない。

なぜ stroke-linejoin は無視されるのか? 内側の角には依然として必要である。

outset

各サブパスのストロークは、 輪郭の「外側」 （塗りつぶし領域の外側）に位置する。

テキストは簡単であり、単純で閉じた自己交差しない パスも同様であるが、 他のカテゴリも存在し、適切な定義を必要とする。

これは開いたパスセグメントにどのように適用されるのか? 1 つの提案は、開いたパスについて outset を left に、inset を right に別名化することである。 端点キャップはどのように扱われるのか?

これはループを持つパスにどのように適用されるのか? 下の図の赤い円の内側の領域は、示されているように、ストロークされた領域の一部なのか? 塗りつぶし規則が nonzero の場合、 内部辺はストロークされるのか。されるならどのように? （下ではストロークなしで示している。）

破線はどのように扱われるのか? 元のパスに基づくのか?

4.2.3. ストロークの端点形状: stroke-linecap プロパティ

stroke-linecap は、 開いたサブパス （破線ストロークのセグメント、 または閉じていない path 要素など） がストロークされるとき、その端に用いられる形状を指定する。 可能な値は次のとおりである:

butt

各サブパスのストロークは、 2 つの端点を越えて延長されない。 （したがって、長さ 0 のサブパスにはストロークが存在しない。）

round

各サブパスの各端において、 ストロークは、ストローク幅の半分に等しい半径を持つ 半円によって延長される。 （長さ 0 のサブパスのストロークは、 サブパスの点を中心とする完全な円である。）

square

各サブパスの端において、 ストロークは、ストローク幅と同じ幅を持ち、長さがストローク幅の半分である 長方形によって延長される。 （長さ 0 のサブパスのストロークは、 辺の長さがストローク幅に等しく、 サブパスの点を中心とし、 その 2 つの辺が、そのサブパスの点における有効接線に平行になるように向けられた正方形である。 長さ 0 のサブパスにおける接線を決定する方法の詳細は、 §4.6 ストロークの形状の算出を参照。）

曲線輪郭上の破線の端に 長方形を追加すると見栄えが悪い。 代わりに、輪郭に沿って stroke-width/2 だけ 破線を延長すべきである。

線端が持つ形状のより正確な説明については、 下記の端点形状の定義を参照。

4.2.4. ストロークの角形状: stroke-linejoin プロパティ

stroke-linejoin は、 パスまたは基本図形がストロークされるとき、その角に用いられる形状を指定する。 これは 2 つの部分を持つ: [ crop | arcs | miter ] は、 ストロークの角を延長するかどうか、およびどのように延長するかを指定する。 [ bevel | round | stupid ] は、 stroke-miterlimit によって 長さが制限されたとき、角の「キャップ」をどのようにレンダリングするかを指定する。

crop

ストロークは、凸な角を形成するために必要な最小量だけ 角を越えて延長される。

これは miter と同一に作用するが、 stroke-miterlimit に、その最小値 1 を持つかのように振る舞わせる。

miter

パスセグメントを結合するために鋭い角が用いられる。 角は、パスセグメントの接線におけるストロークの外側の縁を、 それらが交差するまで延長することによって形成される。

arcs

パスセグメントを結合するために arcs 角が用いられる。 arcs 形状は、結合点におけるストロークの外側の縁を、 結合点における外側の縁と同じ曲率を持つ円弧で延長することによって形成される。

bevel

角は、その対角線に対する垂線によって、 stroke-miterlimit で 切り落とされる。

round

角は bevel と同様に切り落とされ、 切り詰められたストロークの縁に接する塗りつぶされた円弧が追加され、 角を丸める。

fallback

stroke-miterlimit を超えた場合、 これは crop bevel が指定されたかのように振る舞う。

fallback を単に削除できるか? これはばかげた値であり、 SVG1 で miterlimit でのクリップ挙動を持っていなかったためにのみ有用であった。 問題は、人々が現在ほとんど単に*偶然* bevel の挙動を得ていて、 結合が miterlimit まで延び、 余分な角だけがクリップされることを受け入れられるのか、 それとも現在指定されている不連続な挙動を実際に望んでいたのか、である。 境界点は 29 度と 30 度の間にある。

[ crop | arcs | miter ] が省略された場合、 既定値は crop となる。 [ bevel | round | fallback ] が省略された場合、 既定値は fallback となる。

4.2.5. ストロークの角の制限: stroke-miterlimit プロパティ

このプロパティは、2 つのストロークセグメントが角で接する場合における miter または arcs 結合の最大サイズを指定する。 （結合の見かけの「サイズ」—内側の角と外側の角の間の距離—は、角度が小さくなるにつれて無限大に近づく。）

このプロパティは、stroke-align が inset である場合、効果を持たない。

値の意味は次のとおりである:

<number>

結合のサイズに対する制限を、その対角線と stroke-width との比率として指定する。 1 未満の値は無効である（そして宣言を無効にする）。

miter 線結合については、 対角線の長さは、 2 つのセグメント間の角度から stroke-width / sin(θ/2) として計算される。 線結合は、 2 つのパスセグメント間の角度を二等分する線に対して垂直にクリップされる。

arcs 線結合については、 対角線の長さは、 2 つのセグメント間の角度を二等分する線に その 2 つのセグメントが交差する点で接し、 結合の端点を通る円弧に沿って計算される。 線結合はこの円弧に対して垂直にクリップされる。

角度を追加すべきか? miterlimit の数値には物理的な根拠があるが、 実験なしには理解しにくい。

4.2.6. 断片化されたストローク: stroke-break プロパティ

このプロパティは、断片化されたボックスの幾何形状を、 ストロークに対してどのように扱うかを指定する。

値の意味は次のとおりである: COPY FROM FRAGMENTATION

4.3. ストロークの破線化

4.3.1. ストロークの破線パターン: stroke-dasharray プロパティ

このプロパティは、パスをストロークするために用いられる破線と間隔のパターンを制御する。

none

破線化なし: ストロークは連続して描画される。

<length-percentage>+#

使用する破線パターンを指定する。 各 <length-percentage> 値は、 ストロークの次の破線または間隔の長さを表す （最初の破線から始まり、そこから交互に続く）。 パターンはストロークの長さにわたって繰り返される。 （値の数が奇数である場合、 パターンは、偶数個の値を得るために複製されたかのように振る舞う。） 破線パターンは各サブパスの開始時にリセットされ、新たに開始する。

負の値は無効である。 すべての値が 0 である場合、none として扱われる。

SVG はカンマ区切りを許可している。 後方互換性のために CSS でもこれを許可する必要があるか?（いいえと言ってほしい。）

破線の長さを ストロークの幅に相対して指定する方法が必要である。 （例えば、正方形の破線を作るため。）

破線の長さを パスの長さに相対して指定する方法が必要である。 （例えば、スクリプトなしで「自己描画 SVG」を行うため。）

4.3.2. ストローク破線の開始位置: stroke-dashoffset プロパティ

このプロパティは、パスの開始時に破線化を開始する、反復される破線パターン内での距離を指定する。 値は負にできる。

破線が配置されるパス上の位置についてのより正確な説明は、 §4.6.3 破線位置を参照。

4.3.3. 角の制御: stroke-dash-corner および stroke-dash-justify プロパティ

stroke-dash-corner プロパティは、 ストロークされた形状の頂点に常に破線を描画するかどうかを制御する。 角の破線が描画される点には、 形状の等価パス内の各セグメントの 開始点および終了点が含まれる。

none

このプロパティは破線化に特別な効果を持たない: 破線はパスに沿って連続的に配置/サイズ指定される。

<length>

与えられた <length> の破線が、形状の各頂点に描画されなければならない。 開いた形状については、 最初の角破線はパスの開始位置から始まるように配置され、 最後の角破線はパスの終了位置で終わるように配置される。 開いた形状のその他の角破線、 および閉じた形状のすべての角破線は、 その頂点を中心に配置される。

開いた形状の 最初および最後の頂点における角破線は、 他のものの半分の長さにすべきか? これは作者が制御可能であるべきか?

角破線の間の 任意の破線パターンが それらに接触しないように、 パディングを指定する方法があるべきか?

角は、 破線パターンの最初の破線の役割を引き継ぐ必要がある。 そうすることで各セグメントの「内部」は間隔で始まり、間隔で終わる。 各セグメントでパターン内の最初の破線を自動的にスキップするか?

最初の破線の長さを 角として用いるためのキーワード。

stroke-dash-corner が none でない場合、 破線パターン （stroke-dasharray によって指定されるもの）は、 セグメントの角破線の間の空間で、各パスセグメントごとに個別に反復される。

角破線が重なり合う場合に 何が起こるかを定義する必要がある。

このプロパティが有効なとき、 自動的に均等化を発動すべきか? それがないと、既定でかなり間抜けに見える結果になる。

stroke-dash-justify プロパティは、 ストロークの破線パターンが、要素の各サブパスに沿って 整数回反復されるように調整されるかどうか、およびどのように調整されるかを指定する。

none

破線パターンの調整は行われない: サブパスの末端で、その時点まで進んだ分だけでクリップされる。

stretch

破線パターンがサブパス内に整数回収まらない場合に、 破線または間隔（またはその両方）が、それが収まるように長くされることを示す。

compress

破線パターンがサブパス内に整数回収まらない場合に、 破線または間隔（またはその両方）が、それが収まるように短くされることを示す。

dashes

破線パターンが伸長または圧縮される場合に、 破線の長さが調整されることを示す。

gaps

破線パターンが伸長または圧縮される場合に、 間隔の長さが調整されることを示す。

stretch も compress も 指定されない場合、 調整量がより少なくなる方が既定値となる。

dashes も gaps も 指定されない場合、 既定値は ??? となる。

既定では、おそらく 間隔のみを調整すべきである。

破線パターンが調整される対象長は、 stroke-dash-corner プロパティの値に依存する:

• stroke-dash-corner が none である場合、 破線パターンは、 サブパスの長さ内に整数回収まるように調整される。

• stroke-dash-corner が、 0 の長さを含むその他の値を持つ場合、 破線パターンは、サブパスの各パスセグメントごとに異なる形で調整され、 セグメントの両端の 2 つの角破線の間に 整数回収まるようにされる。

破線パターンにおける破線および間隔の長さの調整は、長さに係数を掛けることによって行われる。 その係数は、破線パターンが対象長に 整数回収まる結果となる、1 に最も近い数である。 stretch が用いられる場合、 係数は 1 から 2 の間の数であり、 一方 compress が用いられる場合、 係数は 0 から 1 の間の数である。

stretch が指定されているが、 破線パターンが対象長より長い場合、 調整は行われない。

長すぎる場合、 セグメントを中央揃えにすべきか?

compress が指定されているが、 破線パターンの調整可能な部分を 破線パターンが対象長に収まるほど圧縮できない場合、 圧縮可能な部分はゼロに設定されなければならない。

ストロークが 破線で終わるか間隔で終わるかを 制御できるようにしたいか? 閉じたパスについては、 おそらく末端に間隔が必要であり、 開いたパスについては、 末端に破線がある方がおそらくよい。 この制御を省略し、 パスが閉じているかどうかに基づいて自動的に行うべきか?

4.4. ストロークペイント

4.4.1. ストローク色: stroke-color プロパティ

このプロパティは、要素のストローク色を設定する。 stroke-image と同様に、 ストローク色は最初に指定されたものが最前面 （ユーザーに最も近い位置）に描画され、 後続の各色は前の色の背後に描画される。

ストローク色は、対応するレイヤーの stroke-image が none または無効な画像である場合にのみ描画される。 （言い換えれば、 各レイヤーは画像または色のいずれかを描画し、 両方が指定されている場合は画像が優先される。）

注: これは SVG の stroke プロパティの旧来の挙動と一致させるために必要である。 その挙動では、単一レイヤー画像構文に「フォールバック色」が組み込まれていた。 CSS では、これは image() 関数によってよりよく達成され、 フォールバックを明示的にする。

4.4.2. ストローク画像ソース: stroke-image プロパティ

このプロパティは、要素のストローク画像を設定する。 画像は最初に指定されたものが最前面 （ユーザーに最も近い位置）に描画され、 後続の各画像は前の画像の背後に描画される。 値は background-image と同一に解釈される。必要な変更を加えた上で。

4.4.3. ストロークの配置領域: stroke-origin プロパティ

このプロパティは、ストロークの座標系を指定し、 ストローク 配置領域を設定する。 値の意味は次のとおりである:

match-parent

親と同じストローク配置領域を用いる。 親がない場合は、初期包含ブロックを用いる。

content-box

padding-box

border-box

ボックス自身の content-box/padding-box/border-box をストローク配置領域として用いる。 SVG 図形については、content-box および padding-box は fill-box として扱われ、 一方 border-box は stroke-box として扱われる。

fill-box

SVG 図形または SVG テキストについては、 要素のオブジェクト 境界ボックスを用いる。 CSS ボックスについては、 要素およびすべてのインフローまたは浮動する子孫の テキストグリフ輪郭の境界ボックスを用いる。

stroke-box

SVG 図形または SVG テキストについては、 要素のストローク 境界ボックスを用いる。 CSS ボックスについては、 要素およびすべてのインフローまたは浮動する子孫の テキストグリフのストローク輪郭の境界ボックスを用いる。

SVG UA スタイルシートは、次の規則を含むように修正される:

svg:svg {
  stroke-origin: content-box;
}

ストロークペイント領域のサイズは無限である。 ペイント時、 ストローク色/画像は、影響を受けるテキストのグリフストローク、 または影響を受ける SVG 図形のストローク幾何形状と交差させられる。

SVG ペイントサーバーは *Units 属性内に独自の生成元情報を持ち回るが、 SVGWG は、CSS の生成元に注意を払わせる新しい値を追加できるかもしれない。 あるいは、ここに auto 初期値を追加できる。 これは、ペイントサーバーを参照している場合には ペイントサーバーの情報に委ね、 そうでない場合は match-parent になる。

4.4.4. ストローク画像の配置: stroke-position プロパティ

ストローク画像が指定されている場合、 このプロパティは、それらの初期位置 （任意のサイズ変更後）を、 対応するストローク配置領域内で指定する。 値は background-position と同一に解釈される。 必要な変更を加えた上で。

4.4.5. ストローク画像のサイズ指定: stroke-size プロパティ

ストローク画像のサイズを指定する。 値は background-size と同一に解釈される。 必要な変更を加えた上で。

4.4.6. ストローク画像のタイル化: stroke-repeat プロパティ

サイズ指定および配置の後、ストローク塗りつぶし画像をどのようにタイル化するかを指定する。 値は background-repeat と同一に解釈される。 必要な変更を加えた上で。

4.4.7. ストローク一括指定: stroke プロパティ

このプロパティは、すべてのストロークペイントプロパティ—stroke-color, stroke-image, stroke-origin, stroke-position, stroke-size, および stroke-repeat—を 1 つの宣言で設定する 一括指定である。 省略された値は初期値に設定される。 ただし、省略された stroke-color は transparent に設定され、 省略された stroke-origin は stroke-box に設定される。

4.5. ストロークの透明度

4.5.1. ストロークの不透明度: stroke-opacity プロパティ

stroke-opacity プロパティは、現在のオブジェクトを ストロークするために用いられるペイント操作の不透明度を指定する。 opacity と同様に、 0 または 0% の値は完全に透明であることを意味し、 1 または 100% の値は完全に不透明であることを意味する。

4.6. ストロークの形状の算出

4.6.1. ストロークパス

すべての場合において、 破線パターンに関係するものなど、方向性の影響を受けるすべてのストロークプロパティは、 ストローク操作がグラフィック要素の開始点と同じ点で始まるように レンダリングされなければならない。 特に、 path 要素については、 パスの開始点は最初の “moveto” コマンドの最初の点である。

破線パターンなど、 計算がグラフィック要素の輪郭に沿った進行に依存するストロークプロパティについては、 距離計算は SVG ユーザーエージェントの標準のパスに沿った距離 アルゴリズムを利用することが要求される。

グラデーションや pattern などの複雑なペイントサーバーを用いてストロークが行われる場合、 ストローク操作は、現在のグラフィック要素の幾何形状と それに関連付けられたストロークプロパティによって定義される幾何形状が、 同等の path 要素に変換され、 その後、指定されたペイントサーバーを用いて塗りつぶされた場合に生じる結果と 同一でなければならない。

単一の “moveto” からなるサブパスはストロークされてはならない。 長さ 0 の任意のサブパスは、 stroke-linecap プロパティの値が butt である場合はストロークされてはならないが、 stroke-linecap プロパティの値が round または square である場合は ストロークされなければならず、 それぞれ、指定された点を中心とする円または正方形を生成する。 長さ 0 のサブパスの例には、'M 10,10 L 10,10'、'M 20,20 h 0'、 'M 30,30 z'、 および 'M 40,40 c 0,0 0,0 0,0' が含まれる。

これは下記の ストローク形状の算出要件と重複するはずである。 この節では、要件を規範的ではなく説明的に表現すべきである。

4.6.2. ストローク形状

4.6.3. 破線位置

この節はまだ stroke-dash-corner および stroke-dash-justify を扱っていない。

4.6.4. 端点形状

サブパスに沿った与えられた position における、開始および終了の 端点 形状は、次のように決定される:

1. stroke-linecap が butt である場合、 空の形状を返す。

2. そうでなく、stroke-linecap が round である場合:

   1. これが開始キャップであるなら、 stroke-width を半径とする半円を、 次のように配置して返す:

      • その直線辺は、 サブパスに沿った距離 position における サブパスへの垂線と平行である。

      • その直線辺の中点は、 サブパスに沿った距離 position にある点にある。

      • その弧の中点から直線辺の中点への方向は、 サブパスに沿った距離 position における サブパスの方向と同じである。

   2. そうでなければ、これは終了キャップである。 半径 stroke-width の半円を、 次のように配置して返す:

      • その直線辺は、 サブパスに沿った距離 position における サブパスへの垂線と平行である。

      • その直線辺の中点は、 サブパスに沿った距離 position にある点にある。

      • その直線辺の中点から弧の中点への方向は、 サブパスに沿った距離 position における サブパスの方向と同じである。

3. そうでなければ、stroke-linecap は square である:

   1. これが開始キャップであるなら、 辺の長さが stroke-width および stroke-width / 2 である長方形を、 次のように配置して返す:

      • その長い辺 A および B は、 サブパスに沿った距離 position における サブパスへの垂線と平行である。

      • A の中点は start にある。

      • B の中点から A の中点への方向は、 サブパスに沿った距離 position における サブパスの方向と同じである。

   2. そうでなければ、これは終了キャップである。 辺の長さが stroke-width および stroke-width / 2 である長方形を、 次のように配置して返す:

      • その長い辺 A および B は、 サブパスに沿った距離 position における サブパスへの垂線と平行である。

      • A の中点は end にある。

      • A の中点から B の中点への方向は、 サブパスに沿った距離 position における サブパスの方向と同じである。

4.6.5. 線結合形状

サブパスの与えられたセグメントに対する 線結合形状は、 次のように決定される:

1. P をセグメントの終点にある点とする。

2. A をセグメントの終点における接線に平行な線とする。

3. B を次のセグメントの始点における接線に平行な線とする。

4. A と B が同じ線である場合、 空の形状を返す。

5. |A_left| および |A_right| を、 サブパスの方向に対してそれぞれ A の左側および右側に stroke-width / 2 の距離で A に平行な線とする。

6. |B_left| および |B_right| を、 サブパスの方向に対してそれぞれ B の左側および右側に stroke-width / 2 の距離で B に平行な線とする。

7. |P₁|、|P₂| および |P₃| を、次のように決定される点とする:

   1. A と B の間の小さい方の角度が、 サブパスの方向を考慮したときに、 これらの線の右側にある場合、 |P₁| および |P₂| は、 |A_left| および |B_left| 上で P に最も近い点であり、 |P₃| は |A_left| と |B_left| の交点である。

   2. そうでなければ、|P₁| および |P₂| は、 |A_right| および |B_right| 上で P に最も近い点であり、 |P₃| は |A_right| と |B_right| の交点である。

8. bevel を、3 つの点 P、|P₁|、 および |P₂| から形成される三角形とする。

9. stroke-linejoin が round である場合、 bevel と、stroke-width を半径とし、 P を中心とし、 |P₁| および |P₂| を弧の 2 つの端点とする円形扇形との 和集合を返す。

10. stroke-linejoin が arcs である場合、 |P₁| および |P₂| においてストロークの縁に接し、 それらの点における縁と同じ曲率を持つ円を求める（下記参照）。 両方の曲率がゼロである場合、miter-clip へフォールスルーする。

    これらの円 （または曲率ゼロの場合は線）を用いてストロークの縁を延長する:

    • 2 つの円（または円と線）が交差しない場合、 miter-clip へフォールスルーする。

    • 2 つの円（または円と線）が交差する場合、 線結合領域は、P と |P₁| および |P₂| を結ぶ線と、 P に最も近い交点と |P₁| および |P₂| との間で円（または弧と線）によって定義される弧によって 定義される。

      次に、§4.2.5 ストロークの角の制限: stroke-miterlimit プロパティで定義される miter limit を計算する。 線結合領域のうち miter limit を越えて延びる任意の部分をクリップする。 結果の領域を返す。

      注: 曲率は、任意の変換が適用される前の ユーザー空間で計算されることに注意。

11. stroke-linejoin が miter または miter-clip である場合、 線結合領域は bevel と、 3 つの点 |P₁|、|P₂| および |P₃| から形成される 三角形との和集合である。

12. θ を A と B の間の角度とする。 1 / sin(θ / 2) ≤ stroke-miterlimit であれば、 線結合領域を返す。

13. stroke-linejoin が miter-clip である場合、 線結合領域のうち miter limit を越えて延びる任意の部分をクリップし、 この領域を返す。

14. bevel を返す。

4.6.6. arcs 線結合