ペイントサーバー：単色、グラデーション、パターン

このセクションでは ペイントサーバー について説明します。これは、オブジェクトの塗りや線を他の場所にあるリソースで定義できる方法です。この仕組みにより、リソースを文書全体で再利用できます。オブジェクトの塗りや線についての一般的な説明は塗りと線の描画のセクションを参照してください。

SVGは、いくつかの種類のペイントサーバーを定義しています。

SVG 2 要件:	図形への任意の塗り。
決定:	SVG 2 は任意の要素からの塗りと線をサポートする。
目的:	例えば、動画や画像を塗りのソースとして利用できるようにするため。
担当者:	Alex?（未対応）

ペイントサーバーは、URL参照を塗りや線プロパティに含めることで使用されます（例: fill="url(#MyLightPurple)"）。

プロパティはペイントサーバー要素へ祖先から継承されますが、ペイントサーバー要素を参照する要素からは 継承されません。

ペイントサーバー要素は直接描画されることはありません。その唯一の用途は、塗りや線プロパティで参照できるものとして使うことです。これらの要素の display 値は none にユーザーエージェントスタイルシートによって常に設定され、他のCSSルールやプレゼンテーション属性よりも優先されなければなりません。ペイントサーバー要素は、その要素自身や祖先の display プロパティが none に設定されていても、参照可能です。

14.1.1. ペイントサーバーをテンプレートとして使用する

ほとんどのペイントサーバー要素は ‘href’ 属性を受け入れます。この属性を使うことで、互換性のあるペイントサーバー要素をテンプレートとして定義できます。テンプレート要素に定義された属性は、現在の要素で該当する属性が指定されていない場合、初期値の代わりに使用されます。さらに、現在の要素に記述的要素以外の子コンテンツがない場合は、テンプレート要素の子コンテンツが複製されて置き換えられます。

テンプレート化は任意のレベルまで間接的に行うことができ（外部ファイルリソースのセキュリティ制限によって参照が無効になる場合があります）、参照されたテンプレート要素に該当する子コンテンツがなかったり、指定された属性を定義していない場合は、テンプレート自身の ‘href’ 属性で参照される別の要素から属性値や複製されたコンテンツが取得されます。

この章で説明する各 ‘href’ 属性の記述は、以下のようにテンプレート処理の限界を定義します。

指定された属性が現在の要素で定義されていない場合や、現在の要素に記述的要素以外の子要素がない場合、ユーザーエージェントは URLの処理を行い、参照されたリソースを特定する必要があります。 URL参照が無効でなければ、次のようにURLの対象要素がテンプレート要素として使われます。

ペイントサーバー要素にシャドウツリーがある場合、そのツリー内の要素インスタンスはペイントサーバーの効果をレンダリングする際に、あたかもペイントサーバー要素自身の子要素であるかのように使用されます。

テンプレート化のための use要素シャドウツリーモデルにより、複製されたコンテンツは元のものとは異なるスタイルを継承できます。この挙動はSVG 2で新たに定義されたもので、 SVG 1.1では継承されたペイントサーバーコンテンツにスタイルがどう適用されるか定義されていませんでした。

14.2. グラデーション

グラデーションは、描画面上の点間で滑らかに色が変化するものです。SVGでは、次の3種類のグラデーションが用意されています：

グラデーションを定義した後、グラフィックス要素は塗りや線プロパティにグラデーションを参照させることで、塗りつぶしや線描画にグラデーションを適用できます。

線形および放射グラデーションの色の変化は、グラデーションベクトル上の一連の色ストップによって定義されます。グラデーションノーマルは、ベクトル上の色がどのように面に描画されるかを決定します。線形グラデーションの場合、ノーマルはベクトルに垂直な直線です。放射グラデーションの場合、ノーマルはベクトルと直交する円です。各グラデーションノーマルは、ベクトルによって決定される1色で塗られます。

線形および放射グラデーションでは、2つのストップ間のベクトル上の色値は、各チャンネルごとに両ストップの色をストップからの距離で重み付けして線形補間した値になります。

V = C_{0} + (C_{1} - C_{0}) (\frac{D - O_{0}}{O_{1} - O_{0}})

    $V = C0.rgba + (C1.rgba - C0.rgba) * ((D - C0.offset) / (C1.offset - C0.offset));

グラフィックス要素がグラデーションを参照する場合、概念的にはグラフィックス要素がグラデーションベクトルとノーマルのコピーを自身のジオメトリの一部として扱います。グラフィックス要素のジオメトリに変換が適用されると、それはコピーされたグラデーションベクトルとノーマルにも反映されます。参照先グラデーションに指定されたグラデーション変換は、グラフィックス要素の変換よりも先にグラデーションに適用されます。

14.2.1. 定義

14.2.2. 線形グラデーション

線形グラデーションは、 ‘linearGradient’ 要素によって定義されます。

14.2.2.1. 属性

‘linearGradient’ の ‘x1’、 ‘y1’、 ‘x2’、 ‘y2’ 属性はプレゼンテーション属性ではありません。使用される値はCSSスタイルの影響を受けません。 ‘gradientTransform’ 属性は transform プロパティのプレゼンテーション属性です。

14.2.2.2. 線形グラデーションに関する注意事項

‘x1’ = ‘x2’ かつ ‘y1’ = ‘y2’ の場合、塗られる領域は最後のグラデーションストップの色と不透明度で単色で塗りつぶされます。

例 lingrad01 は、線形グラデーションペイントサーバーを参照して矩形を塗りつぶす方法を示します。

14.2.3. 放射グラデーション

放射グラデーションは ‘radialGradient’ 要素によって定義されます。

‘radialGradient’

カテゴリ:

グラデーション要素, 非描画要素, ペイントサーバー要素

内容モデル:

以下の要素を任意の順序・任意個数含むことができます:

記述的要素 — ‘desc’, ‘title’, ‘metadata’

animate, animateTransform, script, set, stop, style

属性:

コア属性 — ‘id’, ‘tabindex’, ‘lang’, ‘xml:space’, ‘class’, ‘style’
グローバルイベント属性 — ‘oncancel’, ‘oncanplay’, ‘oncanplaythrough’, ‘onchange’, ‘onclick’, ‘onclose’, ‘oncuechange’, ‘ondblclick’, ‘ondrag’, ‘ondragend’, ‘ondragenter’, ‘ondragexit’, ‘ondragleave’, ‘ondragover’, ‘ondragstart’, ‘ondrop’, ‘ondurationchange’, ‘onemptied’, ‘onended’, ‘onerror’, ‘onfocus’, ‘oninput’, ‘oninvalid’, ‘onkeydown’, ‘onkeypress’, ‘onkeyup’, ‘onload’, ‘onloadeddata’, ‘onloadedmetadata’, ‘onloadstart’, ‘onmousedown’, ‘onmouseenter’, ‘onmouseleave’, ‘onmousemove’, ‘onmouseout’, ‘onmouseover’, ‘onmouseup’, ‘onmousewheel’, ‘onpause’, ‘onplay’, ‘onplaying’, ‘onprogress’, ‘onratechange’, ‘onreset’, ‘onresize’, ‘onscroll’, ‘onseeked’, ‘onseeking’, ‘onselect’, ‘onshow’, ‘onstalled’, ‘onsubmit’, ‘onsuspend’, ‘ontimeupdate’, ‘ontoggle’, ‘onvolumechange’, ‘onwaiting’
ドキュメント要素イベント属性 — ‘oncopy’, ‘oncut’, ‘onpaste’
プレゼンテーション属性 —
非推奨xlink属性 — ‘xlink:href’, ‘xlink:title’
‘cx’
‘cy’
‘r’
‘fx’
‘fy’
‘fr’
‘gradientUnits’
‘gradientTransform’
‘spreadMethod’
‘href’

DOMインターフェース:

SVGRadialGradientElement

14.2.3.1. 属性

‘radialGradient’ の ‘cx’、 ‘cy’、 ‘r’ 属性はプレゼンテーション属性ではありません。使用される値はCSSスタイルの影響を受けません。 ‘gradientTransform’ 属性は transform プロパティのプレゼンテーション属性です。

gradientUnits = "userSpaceOnUse | objectBoundingBox"

‘cx’、 ‘cy’、 ‘r’、 ‘fx’、 ‘fy’、 ‘fr’ 属性の座標系を定義します。

初期値: objectBoundingBox
アニメーション可能: はい

userSpaceOnUse

gradientUnits="userSpaceOnUse" の場合、 ‘cx’、 ‘cy’、 ‘r’、 ‘fx’、 ‘fy’、 ‘fr’ はグラデーション要素が参照された時点での現在のユーザー座標系（つまり、 fill や stroke プロパティでグラデーション要素を参照する要素のユーザー座標系）に ‘gradientTransform’ で指定された変換を適用した座標系での値を表します。パーセンテージは現在のSVGビューポートに対する値です。

objectBoundingBox

gradientUnits="objectBoundingBox" の場合、 ‘cx’、 ‘cy’、 ‘r’、 ‘fx’、 ‘fy’、 ‘fr’ のユーザー座標系はグラデーションが適用される要素のバウンディングボックスを使用して確立され（オブジェクトバウンディングボックス単位を参照）、その後 ‘gradientTransform’ で指定された変換を適用します。パーセンテージは対象オブジェクトのバウンディングボックスに対する値です。

gradientUnits="objectBoundingBox" かつ ‘gradientTransform’ が単位行列の場合、放射グラデーションのリングはオブジェクトバウンディングボックス空間で円形になります（抽象座標系で (0,0) がバウンディングボックスの左上、(1,1) が右下）。バウンディングボックスが正方形でない場合、バウンディングボックス空間で円形のリングはユーザー座標系への非均一スケール変換によって楕円形に描画されることがあります。

gradientTransform = "<transform-list>"

グラデーション座標系からターゲット座標系（'userSpaceOnUse' または 'objectBoundingBox'）へのオプションの追加変換を定義します。これによりグラデーションの傾斜などが可能となります。この追加の変換行列は、既に定義されている変換（オブジェクトバウンディングボックス単位からユーザー座標系への変換を含む）に右側（後）から掛け合わせて適用されます。

初期値: 単位変換
アニメーション可能: はい

cx = "<length>"

‘cx’、 ‘cy’、 ‘r’ は放射グラデーションの終点円を定義します。グラデーションは 100%のグラデーションストップがこの終点円の周囲にマッピングされるように描画されます。

初期値: 50%
アニメーション可能: はい

cy = "<length>"

‘cx’ を参照してください。

初期値: 50%
アニメーション可能: はい

r = "<length>"

‘cx’ を参照してください。

負の値はエラーです（エラー処理を参照）。

初期値: 50%
アニメーション可能: はい

fx = "<length>"

‘fx’、 ‘fy’、 ‘fr’ は放射グラデーションの始点円を定義します。グラデーションは 0%のグラデーションストップがこの始点円の周囲にマッピングされるように描画されます。

初期値: 下記参照
アニメーション可能: はい

‘fx’ 属性が指定されていない場合、‘fx’は要素の ‘cx’ の提示値と一致します。 'cx' の値が継承されたかどうかに関わらず同様です。要素が fx の値を指定した要素を参照している場合は、その参照先要素から fx の値が継承されます。

この図は ‘fr’ が ‘r’ の50%の場合の幾何属性の定義方法を示しています。小さな円は外側円の中心 (‘cx’,‘cy’) を示し、十字は内側円の中心 (‘fx’,‘fy’) を示します。破線は2つのグラデーションベクトルです。ベクトルは内側と外側の円の対応する点を結びます。外側円の外側領域は最後の stop-color で塗られ、内側円の内側領域は最初の stop-color で塗られます。

fy = "<length>"

‘fx’ を参照してください。

初期値: 下記参照
アニメーション可能: はい

‘fy’ 属性が指定されていない場合、‘fy’ は要素の ‘cy’ の提示値と一致します。 'cy' の値が継承されたかどうかに関わらず同様です。要素が fy の値を指定した要素を参照している場合は、その参照先要素から fy の値が継承されます。

fr = "<length>"

SVG 2で追加。Canvasとの整合のため。

‘fr’ は焦点円の半径です。‘fx’ を参照してください。

負の値はエラーです（エラー処理を参照）。

初期値: 0%、下記参照
アニメーション可能: はい

属性が指定されていない場合、'0%' が指定されたかのように扱われます。要素が fr の値を指定した要素を参照している場合は、その参照先要素から fr の値が継承されます。

SVG 2 要件:	放射グラデーションで焦点円の半径を指定可能にする。
決定:	‘fr’ 属性をSVG 2の ‘radialGradient’ に追加。
目的:	Canvasとの整合を図るため。0オフセットのストップは ‘fx’、‘fy’、‘fr’ 属性で定義される円上に配置される。
担当者:	Erik (ACTION-3098)

spreadMethod = "pad | reflect | repeat"

グラデーションがペイント対象オブジェクトの内部で始まったり終わったりした場合の挙動を示します。 ‘linearGradient’ 要素の ‘spreadMethod’ 属性と同じ値と意味を持ちます。

初期値: pad
アニメーション可能: はい

href = [URL]

テンプレートグラデーション要素への URL参照。有効な参照は ‘linearGradient’ 要素または別の ‘radialGradient’ 要素である必要があります。

ペイントサーバーをテンプレートとして使用する手順、 URL参照属性の共通処理、非推奨XLink属性の扱いも参照してください。

テンプレートから複製される属性は以下の通りです：

‘cx’
‘cy’
‘r’
‘fx’
‘fy’
‘fr’
‘gradientTransform’
‘gradientUnits’
‘spreadMethod’

URL参照属性の共通処理、非推奨XLink属性の扱いも参照してください。

初期値: 空
アニメーション可能: はい

SVG 2 要件:	焦点が円周上にある放射グラデーションの明確化。
決定:	焦点が円周上にあり、repeatの場合、繰り返し色の最初と最後のストップ間距離は0となり、塗りは全グラデーションストップの平均色になる。
目的:	放射グラデーションの相互運用性向上。
担当者:	Erik (ACTION-3097)
備考:	SVG 1.1では焦点が円周上にあり、repeatの場合の挙動が定義されていません。繰り返し色の最初と最後のストップ間距離は0です。塗りは全グラデーションストップのオフセット加重平均色にすべきと決定されました。

14.2.3.2. 放射グラデーションに関する注意事項

SVG 2で変更。SVG 1.1では、焦点が終点円の外側にある場合、終点円上に移動する必要��ありました。Canvasとの整合のため変更されました。

焦点が終点円外に配置可能となったのは Rigi Kaltbad ワーキンググループ会議で決定されました。

始点円（‘fx’、‘fy’、 ‘fr’で定義）が終点円（‘cx’、‘cy’、 ‘r’で定義）の外側にある場合、事実上2つの円が接する円錐形の領域ができ、その外側はグラデーションの影響を受けず（透明な黒）となります。

始点円が終点円と完全に重なる場合、グラデーションは描画されません。その領域は影響を受けません（透明な黒）。

焦点（始点円）が終点円外にある放射グラデーション。焦点円は右側の小さい円です。グラデーションは spreadMethod="reflect" です。

2つの放射グラデーション（ spreadMethod="repeat"）。左は焦点が右側円周のすぐ内側、 ‘cx’、 ‘cy’、 ‘r’ で定義。右は焦点が円周上。この場合、円周右側に塗られる領域はグラデーションベクトル全体の加重平均色で塗りつぶされます。

上記右図のグラデーション右側領域の扱いはCanvasと異なり、Canvasでは透明な黒となります。SVG 1.1との互換性維持のためです。

加重平均色の色空間はグラデーション補間と同じです。 Rigi Kaltbad ワーキンググループ会議を参照。

例 radgrad01 は、放射グラデーションペイントサーバーを参照して矩形を塗りつぶす方法を示します。

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 300 200" >
  <title>例 radgrad01</title>
  <desc>放射グラデーションペイントサーバーを使って矩形を塗りつぶします。</desc>

  <defs>
    <radialGradient id="MyGradient"
		    gradientUnits="userSpaceOnUse"
		    cx="150" cy="100"
		    r="100">
      <stop offset="0%"   stop-color="#A8F" />
      <stop offset="50%"  stop-color="#FDC" />
      <stop offset="100%" stop-color="#A8F" />
    </radialGradient>
  </defs>

  <!-- 矩形は放射グラデーションペイントサーバーで塗りつぶされます -->
  <rect fill="url(#MyGradient)"
	stroke="black"
	stroke-width="2"
	x="25" y="25" width="250" height="150"/>
</svg>

例 radgrad01

この例をSVGとして表示（SVG対応ブラウザのみ）

14.2.4. グラデーションストップ

グラデーションで使用する色のベクトルは、 ‘stop’ 要素によって定義されます。これらは ‘linearGradient’ または ‘radialGradient’ 要素の子要素です。

SVG 1.1では、上記は「色のランプ...」と記載されていましたが、「ランプ」はこのセクションの他の場所では使用されていません。

14.2.4.1. 属性

14.2.4.2. プロパティ

14.2.4.3. グラデーションストップに関する注意事項

14.3. パターン

パターンは、あらかじめ定義されたグラフィックオブジェクトを使って、オブジェクトの塗りや線を行うために使用されます。パターンとなるオブジェクトは、x方向とy方向に一定間隔で複製（「タイル状」）され、塗りや線を描画する領域を覆います。パターンは ‘pattern’ 要素で定義され、 fill や stroke プロパティでグラフィックス要素に参照することで、その要素をパターンで塗りつぶし／線を描くことができます。

属性 ‘x’、 ‘y’、‘width’、 ‘height’、 ‘patternUnits’ は、無限キャンバス上の参照矩形を定義します。この参照矩形の左上は (x, y)、右下は (x + width, y + height) です。タイルは理論上、X・Y方向（正負とも）無限に並び、各矩形の左上は (x + m*width, y + n*height) となります（m, nは整数）。

14.3.1. 属性

‘pattern’ の ‘x’、 ‘y’、 ‘width’、 ‘height’ 属性はプレゼンテーション属性ではありません。使用値はCSSスタイルの影響を受けません。 ‘patternTransform’ 属性は transform プロパティのプレゼンテーション属性です。

14.3.2. パターンに関する注意事項

SVGのユーザーエージェントスタイルシートは、 ‘pattern’要素の overflowプロパティを hiddenに設定します。これによりパターンタイルの境界で矩形クリッピングパスが生成されます。 overflowプロパティが上書きされない限り、パターン内のグラフィックスがパターン矩形の外側に出た場合はクリップされます。下記の例 pattern01はパターンタイルへのクリッピング効果を示しています。

overflowプロパティが visibleに設定されている場合、パターンの境界外の描画動作は現時点で未定義です。将来の現行標準ではoverflowを表示することが要求されるかもしれません。 SVG実装者はoverflowを表示することを推奨します。これは作者が期待する動作です。 overflowを描画する場合、パターンタイルは左から右へ行、行は上から下へ描画されるべきです。

‘pattern’ の内容は新しい座標系に対して相対的です。 ‘viewBox’属性がある場合、新しい座標系は、‘pattern’要素の ‘x’、 ‘y’、 ‘width’、 ‘height’、 ‘patternUnits’属性で定義される領域に標準の‘viewBox’や ‘preserveAspectRatio’のルールで収められます。 ‘viewBox’属性がない場合、新しい座標系の原点は(x, y)で、 xは‘pattern’要素の ‘x’属性で、 yは‘pattern’要素の ‘y’属性で決まります。よって、次の例の場合：

矩形はパターンタイルの原点から右に5単位、下に5単位の位置に配置されます。

‘viewBox’属性は、 ‘x’、 ‘y’、 ‘width’、 ‘height’、 ‘patternUnits’属性による新しいパターン座標系の変換に加えて補足的な変換を導入します。

例 pattern01 はパターンペイントサーバーを参照して矩形を塗りつぶす方法を示します。各三角形の青い線が上端と左端で少しクリップされていることに注意してください。これはSVGのユーザーエージェントスタイルシートが ‘pattern’要素の overflowプロパティを hiddenに設定し、パターンがパターンタイルの境界でクリップされるためです。

14.4. DOMインターフェース

14.4.1. SVGGradientElementインターフェース

SVGGradientElement インターフェースは、グラデーションペイントサーバー要素インターフェースの基底インターフェースとして使用されます。

SVGGradientElementで定義されている数値型spread method定数は、 ‘spreadMethod’属性が取り得るキーワード値を表現します。それぞれの意味は以下の通りです：

定数	意味
SVG_SPREADMETHOD_PAD	padキーワード。
SVG_SPREADMETHOD_REFLECT	reflectキーワード。
SVG_SPREADMETHOD_REPEAT	repeatキーワード。
SVG_SPREADMETHOD_UNKNOWN	その他の値。

gradientUnits IDL属性は reflectsで‘gradientUnits’内容属性を反映します。グラデーション要素上の‘gradientUnits’属性の数値型値は以下の通りです：

値	数値型値
userSpaceOnUse	SVG_UNIT_TYPE_USERSPACEONUSE
objectBoundingBox	SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

gradientTransform IDL属性は、 reflectsで計算値および 'gradientTransform'プレゼンテーション属性を反映します。対象要素は‘linearGradient’および ‘radialGradient’です。

spreadMethod IDL属性は reflectsで‘spreadMethod’内容属性を反映します。グラデーション要素上の‘spreadMethod’属性の数値型値は上記の定数表の通りです。

14.4.2. SVGLinearGradientElementインターフェース

x1、 y1、 x2、 y2 IDL属性は、それぞれ‘x1’、 ‘y1’、 ‘x2’、 ‘y2’ 内容属性を反映します。

14.4.3. SVGRadialGradientElementインターフェース

cx、 cy、 r、 fx、 fy、 fr IDL属性は、それぞれ‘cx’、 ‘cy’、 ‘r’、 ‘fx’、 ‘fy’、 ‘fr’ 内容属性を反映します。

14.4.4. SVGStopElementインターフェース

SVGStopElement オブジェクトは DOM内の‘stop’要素を表します。

offset IDL属性は reflectsで ‘offset’内容属性を反映します。

14.4.5. SVGPatternElementインターフェース

patternUnits、 patternContentUnits のIDL属性は、それぞれ‘patternUnits’、 ‘patternContentUnits’ 内容属性を反映します。 ‘patternUnits’および ‘patternContentUnits’の数値型値は以下の通りです：

値	数値型値
userSpaceOnUse	SVG_UNIT_TYPE_USERSPACEONUSE
objectBoundingBox	SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

patternTransform IDL属性は reflectsでtransformプロパティの計算値および ‘patternTransform’プレゼンテーション属性を反映します。

x、 y、 width、 height のIDL属性は、それぞれ‘x’、 ‘y’、 ‘width’、 ‘height’ 内容属性を反映します。

第14章：ペイントサーバー：グラデーションとパターン

14.1. はじめに