14. 塗りサーバ：グラデーションとパターン — Paint Servers: Gradients and Patterns

14.2.2.1. 属性

注記： `linearGradient$e 上の［ `x1$aL, `y1$aL, `x2$aL, `y2$aL ］属性は、呈示~属性ではないことに注意。 使用~値は~CSS~styleにより影響されない。 `gradientTransform$aL 属性は `transform$p ~prop用の呈示~属性である。 ◎ Note that the ‘x1’,‘y1’, ‘x2’ and ‘y2’ attributes on a ‘linearGradient’ are not presentation attributes; the used value is not affected by CSS styles. The ‘gradientTransform’ attribute is a presentation attribute for the transform property.

◎属名 `gradientUnits@aL ◎属値 `userSpaceOnUse^v | `objectBoundingBox^v ◎属初 `objectBoundingBox^v ◎属ア 可 ◎表終 ◎ gradientUnits ◎ ↓

［ `x1$aL, `y1$aL, `x2$aL, `y2$aL ］属性~用の座標系を定義する。 これらの属性の値は、［ この属性の値に応じて，次に与える座標系 ］に［ `gradientTransform$aL 属性に指定された変形 ］も適用して得られる座標系における値を表現することになる： ◎ Defines the coordinate system for attributes ‘x1’, ‘y1’, ‘x2’ and ‘y2’. ◎ Value userSpaceOnUse | objectBoundingBox initial value objectBoundingBox Animatable yes

`userSpaceOnUse^v

~gradient要素の参照元の利用元~座標系（すなわち，［ `fill$p ／ `stroke$p ］~propを介して当の~gradient要素を参照している要素~用の利用元~座標系）。 ただし，百分率は、現在の~SVG表示域に相対的な値を表現する。 ◎ If gradientUnits="userSpaceOnUse", ‘x1’, ‘y1’, ‘x2’, and ‘y2’ represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute ‘gradientTransform’. Percentages represent values relative to the current SVG viewport.

`objectBoundingBox^v

~gradientが適用される要素の`限界~box$を利用して確立される座標系（`~obj限界~box単位$を見よ）。 ただし，百分率は、この`限界~box$に相対的な値を表現する。 ◎ If gradientUnits="objectBoundingBox", the user coordinate system for attributes ‘x1’, ‘y1’, ‘x2’ and ‘y2’ is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) and then applying the transform specified by attribute ‘gradientTransform’. Percentages represent values relative to the bounding box for the object.

`gradientTransform$aL が単位行列である場合： 線型~gradientの法線は，~obj限界~box空間（すなわち，~boxの［ 左上隅を ( 0, 0 ), 右下隅を ( 1, 1 ) ］に対応させた抽象-座標系）においては`~gradient~vector$に垂直になる。 ~objの`限界~box$が正方形でない場合、限界~box空間から利用元~座標系へは一様でない拡縮~変形nが適用される — その結果，~gradient法線は、利用元~空間においては 一般に`~gradient~vector$と垂直に描画されないが、`~gradient~vector$が限界~box空間のどちらかの軸に平行である場合は垂直であり続ける。 ◎ When gradientUnits="objectBoundingBox" and ‘gradientTransform’ is the identity matrix, the normal of the linear gradient is perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the gradient normal which is initially perpendicular to the gradient vector within object bounding box space may render non-perpendicular relative to the gradient vector in user space. If the gradient vector is parallel to one of the axes of the bounding box, the gradient normal will remain perpendicular. This transformation is due to application of the non-uniform scaling transformation from bounding box space to user coordinate system.

◎属名 `gradientTransform@aL ◎属値 `transform-list$t ◎属初 変形なし（ `identity^en 変形） ◎属ア 可 ◎表終 ◎ gradientTransform ◎ ↓

~gradient座標系から~target座標系（すなわち， `userSpaceOnUse^v ／ `objectBoundingBox^v ）への追加的な変形nの定義を包含する（省略時は変形なし）。 これにより、~gradientを斜傾するなどが可能になる。 この追加的な変形n行列は、それまでに定義された座標系変換 — `~obj限界~box単位$を利用元~座標系に換算するために必要yな暗黙的な変形nも含む — に右から乗算される。 ◎ Contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., 'userSpaceOnUse' or 'objectBoundingBox'). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user coordinate system. ◎ Value <transform-list> initial value identity transform Animatable yes

◎属名 `x1@aL, `y1@aL, `x2@aL, `x2@aL ◎属値 `length$t `†$ ◎属初 `0%^v ◎属ア 可 ◎表終 ◎ x1 ◎ ↓

これらの属性は、線型~gradient用の`~gradient~vector$を定義する。 この~gradient~vectorは、`色停$が対応付けられる始点と終点を供する。 どれも、値は［ 実数, 百分率 ］どちらもとり得る†。 ◎ ‘x1’, ‘y1’, ‘x2’ and ‘y2’ define a gradient vector for the linear gradient. This gradient vector provides starting and ending points onto which the gradient stops are mapped. The values of ‘x1’, ‘y1’, ‘x2’ and ‘y2’ can be either numbers or percentages. ◎ Value <length> initial value 0% Animatable yes ◎ y1 ◎ See ‘x1’. ◎ Value <length> initial value 0% Animatable yes ◎ x2 ◎ See ‘x1’. ◎ Value <length> initial value 100% Animatable yes ◎ y2 ◎ See ‘x1’. ◎ Value <length> initial value 0% Animatable yes

【† 構文に示されている `length^t は、 実際に意図された構文を正しく反映していない（`222$issue）。 `number$t ／ `percentage$t 値もとり得る（かもしれない）。 】

◎属名 `spreadMethod@aL ◎属値 `pad^v | `reflect^v | `repeat^v ◎属初 `pad^v ◎属ア 可 ◎表終 ◎ spreadMethod ◎ ↓

~gradientの［ 始端／終端 ］の外側にある~target領域をどう塗るかを指示する。 ◎ Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle. ◎ Value pad | reflect | repeat initial value pad Animatable yes

`pad^v

残りの~target領域を，［ ~gradientの始端~側には ~gradientの始端の色 ／ ~gradientの終端~側には ~gradientの終端の色 ］を利用して~fillし尽くす。 ◎ Use the terminal colors of the gradient to fill the remainder of the target region.

`reflect^v

~target領域を~fillし尽くすまで、~gradient~patternを交互に逆向きにしながら連続的に繰返す — 始端→終端, 終端→始端, 始端→終端, 等々。 ◎ Reflect the gradient pattern start-to-end, end-to-start, start-to-end, etc. continuously until the target rectangle is filled.

`repeat^v

~target領域を~fillし尽くすまで、~gradient~patternを連続的に繰返す — 始端→終端, 始端→終端, 始端→終端, 等々。 ◎ Repeat the gradient pattern start-to-end, start-to-end, start-to-end, etc. continuously until the target region is filled.

◎属名 `href@aL ◎属値 `~URLt$ ◎属初 空 ◎属ア 可 ◎表終 ◎ href ◎ ↓

~templateを定義する~gradient要素への`~URL参照$。 妥当になるためには、参照は［ `radialGradient$e ／ 自身以外の `linearGradient$e ］要素でなければナラナイ。 ◎ A URL reference to a template gradient element; to be valid, the reference must be to a different ‘linearGradient’ or a ‘radialGradient’ element.

【 複数回にわたる参照の連鎖が循環する場合、［ 循環を生じさせた参照のみが無効になる ／ すべての参照が無効になる ］のどっちになるか，述べられていない — 現在の~UAの実装は、前者の挙動になるようだ。 ［ `radialGradient$e ／ `pattern$e ］要素についても同様。 】

`塗り~serverの~templateとしての利用-法$sec, および ［ `~URL参照~属性$／`非推奨にされた~XLink属性$ ］用に定義された共通な取扱いを見よ。 ◎ Refer to the process for using paint servers as templates, and to the common handling defined for URL reference attributes and deprecated XLink attributes.

`linearGradient$e 要素にて`複製-可能な属性$は ⇒＃ `x1$aL, `y1$aL, `x2$aL, `y2$aL, `gradientTransform$aL, `gradientUnits$aL, `spreadMethod$aL ◎ The specified attributes that will be copied from the template are: • ‘x1’ • ‘y1’ • ‘x2’ • ‘y2’ • ‘gradientTransform’ • ‘gradientUnits’ • ‘spreadMethod’ ◎ Value URL [URL] initial value empty Animatable yes

14.2.2.2. 線型~gradientに対する注記

［ `x1$aL, `x2$aL の値が等しい, かつ `y1$aL, `y2$aL の値が等しい ］場合、塗られる区画は，最後の`色停$の色と不透明度を利用して単独の色で塗られることになる。 ◎ If ‘x1’ = ‘x2’ and ‘y1’ = ‘y2’, then the area to be painted will be painted as a single color using the color and opacity of the last gradient stop.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     viewBox="0 0 300 200" >

  <title>Example lingrag01</title>
  <desc>
線型~gradient塗り~server利用して矩形を~fillする。
◎
Fill a rectangle using a linear-gradient paint server.
</desc>

  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#A8F" />
      <stop offset="95%" stop-color="#FDC" />
    </linearGradient>
  </defs>

  <!-- 
矩形は、線型~gradient塗り~serverを利用して~fillされる
◎
The rectangle is filled using a linear-gradient paint server
 -->
  <rect fill="url(#MyGradient)"
	stroke="black"
	stroke-width="2"
	x="25" y="25" width="250" height="150"/>
</svg>

14.2.3.1. 属性

注記： `radialGradient$e 上の［ `cx$aR, `cy$aR, `r$aR ］属性は、呈示~属性ではないことに注意。 使用~値は~CSS~styleにより影響されない。 `gradientTransform$aR 属性は `transform$p ~prop用の呈示~属性である。 ◎ Note that the ‘cx’,‘cy’, and ‘r’ attributes on a ‘radialGradient’ are not presentation attributes; the used value is not affected by CSS styles. The ‘gradientTransform’ attribute is a presentation attribute for the transform property.

◎属名 `gradientUnits@aR ◎属値 `userSpaceOnUse^v | `objectBoundingBox^v ◎属初 `objectBoundingBox^v ◎属ア 可 ◎表終 ◎ gradientUnits = "userSpaceOnUse | objectBoundingBox" ◎ ↓

［ `cx$aR, `cy$aR, `r$aR, `fx$aR, `fy$aR, `fr$aR ］属性~用の座標系を定義する。 これらの属性の値は、［ この属性の値に応じて，次に与える座標系 ］に［ `gradientTransform$aR 属性に指定された変形 ］も適用して得られる座標系における値を表現することになる： ◎ Defines the coordinate system for attributes ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, and ‘fr’. ◎ initial value objectBoundingBox Animatable yes

`userSpaceOnUse^v

~gradient要素の参照元の利用元~座標系（すなわち，［ `fill$p ／ `stroke$p ］~propを介して当の~gradient要素を参照している要素~用の利用元~座標系）。 ただし，百分率は、現在の~SVG表示域に相対的な値を表現する。 ◎ If gradientUnits="userSpaceOnUse", ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, and ‘fr’ represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute ‘gradientTransform’. Percentages represent values relative to the current SVG viewport.

`objectBoundingBox^v

~gradientが適用される要素の`限界~box$を利用して確立される座標系（`~obj限界~box単位$を見よ）。 ただし，百分率は、この`限界~box$に相対的な値を表現する。 ◎ If gradientUnits="objectBoundingBox", the user coordinate system for attributes ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’, and ‘fr’ is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) and then applying the transform specified by attribute ‘gradientTransform’. Percentages represent values relative to the bounding box for the object.

`gradientTransform$aR が単位行列である場合： 放射型~gradientの輪は，~obj限界~box空間（すなわち，~boxの［ 左上隅を ( 0, 0 ), 右下隅を ( 1, 1 ) ］に対応させた抽象-座標系）においては真円になる。 ~objの`限界~box$が正方形でない場合、限界~box空間から利用元~座標系へは一様でない拡縮~変形nが適用される — その結果，真円な輪は、利用元~空間においては楕円に描画されることになる。 ◎ When gradientUnits="objectBoundingBox" and ‘gradientTransform’ is the identity matrix, then the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to application of the non-uniform scaling transformation from bounding box space to user coordinate system.

◎属名 `gradientTransform@aR ◎属値 `transform-list$t ◎属初 変形なし（ `identity^en 変形） ◎属ア 可 ◎表終 ◎ gradientTransform = "<transform-list>" ◎ ↓

~gradient座標系から~target座標系（すなわち， `userSpaceOnUse^v ／ `objectBoundingBox^v ）への追加的な変形nの定義を包含する（省略時は変形なし）。 これにより、~gradientを斜傾するなどが可能になる。 この追加的な変形n行列は、それまでに定義された変形n — `~obj限界~box単位$を利用元~座標系に換算するために必要yな暗黙的な変形nも含む — に右から乗算される。 ◎ Contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., 'userSpaceOnUse' or 'objectBoundingBox'). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user coordinate system. ◎ initial value identity transform Animatable yes

◎属名 `cx@aR, `cy@aR, `r@aR ◎属値 `length$t `†$ ◎属初 `50%^v ◎属ア 可 ◎表終 ◎ cx = "<length>" ◎ ↓

［ `cx$aR, `cy$aR ］は、放射型~gradient用の終端円の中心を， `r$aR は半径を定義する。 ~gradientは［ ~offset 100% の`色停$がこの終端円の周に対応付けられる ］ように描かれることになる。 ◎ ‘cx’, ‘cy’ and ‘r’ define the end circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this end circle. ◎ initial value 50% Animatable yes ◎ cy = "<length>" ◎ See ‘cx’. ◎ initial value 50% Animatable yes ◎ r = "<length>" ◎ See ‘cx’.

`r$aR に対する負な値は~errorとする（`~error処理$secを見よ）。 ◎ A negative value is an error (see Error processing). ◎ initial value 50% Animatable yes

◎属名 `fx@aR, `fy@aR, `fr@aR ◎属値 `length$t `†$ ◎属初 下を見よ ◎属ア 可 ◎表終 ◎ fx = "<length>" ◎ ↓

［ `fx$aR, `fy$aR ］は 放射型~gradient用の始端円（焦点円）の中心， `fr$aR は半径を定義する。 ~gradientは［ ~offset 0% の`色停$がこの始端円の周に対応付けられる ］ように描かれることになる。 ◎ ‘fx’, ‘fy’, and ‘fr’ define the start circle for the radial gradient. The gradient will be drawn such that the 0% gradient stop is mapped to the perimeter of this start circle. ◎ initial value see below Animatable yes

［ `fx$aR ／ `fy$aR ］属性が指定されていない場合、［ `fx$aR ／ `fy$aR ］は［ `cx$aR ／ `cy$aR ］の呈示~用の値に一致することになる — 当の要素が［ `cx$aR ／ `cy$aR ］用の値を継承するかどうかを問わず。 ◎ If attribute ‘fx’ is not specified, ‘fx’ will coincide with the presentational value of ‘cx’ for the element whether the value for 'cx' was inherited or not.＼

`fr$aR 属性に対しては ⇒＃ 負な値は~error（`~error処理$secを見よ）／ 指定されていない場合の効果は、値 `0%^v が指定されていたかのようになる。 ◎ ↓↓

要素が［ `fx$aR ／ `fy$aR ／ `fr$aR ］用の値を指定する要素を参照する場合、［ `fx$aR ／ `fy$aR ／ `fr$aR ］の値は参照先の要素から継承される。 ◎ If the element references an element that specifies a value for 'fx', then the value of 'fx' is inherited from the referenced element.

注記： `fr$aR 属性は、~Canvas~APIと揃えるために，~SVG-2にて新たに追加された。 ◎ ↓↓

◎ This diagram shows how the geometric attributes are defined for the case where ‘fr’ is 50% of ‘r’. The small circle marks the center of the outermost circle (‘cx’,‘cy’), while the cross marks the center of the innermost circle (‘fx’,‘fy’). The dashed lines show two gradient vectors. Vectors connect corresponding points on the inner and outer most circles. The region outside the outer circle is painted with the last stop-color while the region inside the inner circle is painted with the first stop-color. ◎ fy = "<length>" ◎ See ‘fx’. ◎ initial value see below Animatable yes ◎ If attribute ‘fy’ is not specified, ‘fy’ will coincide with the presentational value of ‘cy’ for the element whether the value for 'cy' was inherited or not. If the element references an element that specifies a value for 'fy', then the value of 'fy' is inherited from the referenced element. ◎ fr = "<length>" ◎ New in SVG 2. Added to align with Canvas. ◎ ‘fr’ is the radius of the focal circle. See ‘fx’. ◎ A negative value is an error (see Error processing). ◎ initial value 0%, see below Animatable yes ◎ If the attribute is not specified, the effect is as if a value of '0%' were specified. If the element references an element that specifies a value for 'fr', then the value of 'fr' is inherited from the referenced element.

~SVG-2要件： 放射型~gradientにおいて焦点円の半径を指定できるようにする。 ◎ SVG 2 Requirement: Allow specifying focal circle radius in radial gradients.

• 解決： ~SVG-2用に `radialGradient^e に `fr^a 属性を追加する （`~~参照先＠http://www.w3.org/2011/07/29-svg-minutes.html#item06$）。 ◎ Resolution: Add an ‘fr’ attribute to ‘radialGradient’> for SVG 2.
• 目的： ~Canvas~APIに揃える。 ~offset 0 の色停は［ `fx^a, `fy^a, `fr^a ］属性により定義される真円に対応することになる。 ◎ Purpose: To align with Canvas. The zero-offset stop would be along the circle defined by the ‘fx’, ‘fy’ and ‘fr’ attributes.
• Owner: Erik (`3098$ACTION)

◎属名 `spreadMethod@aR ◎属値 `pad^v | `reflect^v | `repeat^v ◎属初 `pad^v ◎属ア 可 ◎表終 ◎ spreadMethod = "pad | reflect | repeat" ◎ ↓

~gradientの［ 始端円の内側／終端の外側 ］にある~target領域をどう塗るかを指示する。 とり得る値と意味は `linearGradient$e 要素~上の `spreadMethod$aL 属性と同じとする。 ◎ Indicates what happens if the gradient starts or ends inside the bounds of the object(s) being painted by the gradient. Has the same values and meanings as the ‘spreadMethod’ attribute on ‘linearGradient’ element. ◎ initial value pad Animatable yes

◎属名 `href@aR ◎属値 `~URLt$ ◎属初 空 ◎属ア 可 ◎表終 ◎ href = [URL] ◎ ↓

~template~gradient要素への`~URL参照$。 妥当になるためには、参照は［ `linearGradient$e ／ 異なる `radialGradient$e ］要素にしなければナラナイ。 ◎ A URL reference to a template gradient element; to be valid, the reference must be to a ‘linearGradient’ element or a different ‘radialGradient’ element.

`塗り~serverの~templateとしての利用-法$sec, および ［ `~URL参照~属性$／`非推奨にされた~XLink属性$ ］用に定義された共通な取扱いを見よ。 ◎ Refer to the process for using paint servers as templates, and to the common handling defined for URL reference attributes and deprecated XLink attributes.

`radialGradient$e 要素にて`複製-可能な属性$は ⇒＃ `cx$aR, `cy$aR, `r$aR, `fx$aR, `fy$aR, `fr$aR, `gradientTransform$aR, `gradientUnits$aR, `spreadMethod$aR ◎ The specified attributes that will be copied from the template are: • ‘cx’ • ‘cy’ • ‘r’ • ‘fx’ • ‘fy’ • ‘fr’ • ‘gradientTransform’ • ‘gradientUnits’ • ‘spreadMethod’ ◎ ＊重複 Refer to the common handling defined for URL reference attributes and deprecated XLink attributes. ◎ initial value empty Animatable yes

14.2.3.2. 放射型~gradientに対する注記

注記： ~SVG-2において変更された。 ~SVG-11は、終端円の外側にある焦点は，終端円~上に移動するよう要求していた。 この変更は、~Canvas~APIに揃えるために加えられた。 ◎ Changed in SVG 2. SVG 1.1 required that the focal point, if outside the end circle, be moved to be on the end circle. The change was made to align with Canvas.

焦点が終端円の外側にも許容することは、 Rigi Kaltbad working group meeting にて解決された。 ◎ Allowing the focal point to lie outside the end circle was resolved at the Rigi Kaltbad working group meeting.

［ `fx$aR, `fy$aR, `fr$aR ］により定義される始端円が［ `cx$aR, `cy$aR, `r$aR ］により定義される終端円の外側にある場合、実質的に両~真円に接する錐が作成される。 この錐の外側にある区画には、~gradientは塗られない（言い換えれば、透明な黒で塗られる）。 ◎ If the start circle defined by ‘fx’, ‘fy’ and ‘fr’ lies outside the end circle defined by ‘cx’, ‘cy’, and ‘r’, effectively a cone is created, touched by the two circles. Areas outside the cone stay untouched by the gradient (transparent black).

始端円と終端円が全部的に重合する場合、~gradientは描かれなくなる。 区画は塗られない（言い換えれば、透明な黒で塗られる）。 ◎ If the start circle fully overlaps with the end circle, no gradient is drawn. The area stays untouched (transparent black).

注記： 右図における~gradientの右方（外側）にある区画の扱いは、~Canvas~APIと異なる — ~Canvas~APIでは区画は透明な黒になる。 この相違は、~SVG-11との互換性を保守するためである。 ◎ The treatment of the area to the right of the gradient in the right-hand side of the above figure is different from that of Canvas where the area would be transparent black. The difference is to maintain compatibility with SVG 1.1.

加重平均~用の色~空間は、~gradientを補間するときのそれと同じとする。 Rigi Kaltbad working group meeting を見よ。 ◎ The color space for the weighted average is the same as in which the gradient is interpolated. See Rigi Kaltbad working group meeting.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 300 200" >
  <title>Example radgrad01</title>
  <desc>
放射型~gradient塗り~server利用して矩形を~fillする。
◎
Fill a rectangle by referencing a radial gradient paint server.
</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>

  <!-- 
矩形は、放射型~gradient塗り~serverを利用して~fillされる
◎
The rectangle is filled using a radial gradient paint server
 -->
  <rect fill="url(#MyGradient)"
	stroke="black"
	stroke-width="2"
	x="25" y="25" width="250" height="150"/>
</svg>

14.2.4.1. 属性

◎属名 `offset@a ◎属値 `number$t | `percentage$t ◎属初 `0^v ◎属ア 可 ◎表終 ◎ offset ◎ ↓

色停をどこに配置するかを指示する。 線型~gradientにおいては，`~gradient~vector$上の所在を表現し、放射型~gradientにおいては始端円（最も小さい真円）の辺から終端円（最も大きい真円）の辺への割合分による距離を表現する。 ◎ Indicates were the gradient stop is placed. For linear gradients, the ‘offset’ attribute represents a location along the gradient vector. For radial gradients, it represents a fractional distance from the edge of the innermost/smallest circle to the edge of the outermost/largest circle. ◎ Value <number> | <percentage> initial value 0 Animatable yes

`number$t

通例的に 0 以上 1 以下の実数 ◎ A number usually ranging from 0 to 1.

`percentage$t

通例的に 0% 以上 100% 以下の百分率 ◎ A percentage usually ranging from 0% to 100%.

14.2.4.2. ~prop

`stop-color$p ~propは、当の色停にどの色を利用するかを指示する。 ~keyword `currentColor^v その他の色~構文も，［ `fill$p ／ `stroke$p ］~prop用の `paint$t 指定の中と同じ方式で指定できる。 ◎ ‘stop-color’ ◎ The stop-color property indicates what color to use at that gradient stop. The keyword currentColor and other color syntaxes can be specified in the same manner as within a <paint> specification for the fill and stroke properties.

注記： ~gradientに関しては、~SVGによる `transparent^v ~keywordの扱いは，~CSSと異なる。 ~SVGでは，~gradientを乗算済み色~空間~内では計算しないので、 `transparent^v は，~~本当に透明な黒を意味する。 `stop-color$p を値 `transparent^v に指定することは、［ `stop-color$p を値 `black^v, `stop-opacity$p を値 `0^v ］に指定することに等価になる。 ◎ With respect to gradients, SVG treats the 'transparent' keyword differently than CSS. SVG does not calculate gradients in pre-multiplied space, so 'transparent' really means transparent black. Specifying a stop-color with the value 'transparent' is equivalent to specifying a stop-color with the value 'black' and a stop-opacity with the value '0'.

`stop-opacity$p ~propは、所与の色停の不透明度を定義する。 ~gradientの計算~用に利用される不透明度~値は、［ `stop-opacity$p の値と `stop-color$p の値の不透明度 ］の積になる。 明示的な不透明度~情報を含まない `stop-color$p の不透明度は 1 に扱うモノトスル。 ◎ ‘stop-opacity’ ◎ The stop-opacity property defines the opacity of a given gradient stop. The opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color. For stop-color value types of that don't include explicit opacity information, the opacity of that component must be treated as 1.

`number$t

`stop-color$p の不透明度。 0.0 （全部的に透明）以下の値は 0.0 に切り上げ, 1.0 （全部的に不透明）以上の値は 1.0 に切り下げるモノトスル。 ◎ The opacity of the stop-color. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) must be clamped to this range.

`percentage$t

0 以上 1 以下の範囲の百分率として表出される， `stop-color$p の不透明度を与える。 ◎ The opacity of the stop-color expressed as a percentage of the range 0 to 1.

14.2.4.3. 色停に対する注記

• ~gradient~offset値は、 0 （ 0% ）以下ならば 0 （ 0% ）に切り上げられ， 1 以上（ 100% ）ならば 1 （ 100% ）に切り下げられる。 ◎ Gradient offset values less than 0 (or less than 0%) are rounded up to 0%. Gradient offset values greater than 1 (or greater than 100%) are rounded down to 100%.
• ~gradient効果が生じるためには、 2 個~以上の色停を定義することが必要yである。 定義されている色停が無い場合、 塗り~styleに `none^v が指定されていたかのようになるモノトスル。 定義されている色停が 1 個だけの場合、 その色停~用に定義された色のみを利用する~fillでベタ色に塗られる。 ◎ It is necessary that at least two stops defined to have a gradient effect. If no stops are defined, then painting shall occur as if 'none' were specified as the paint style. If one stop is defined, then paint with the solid color fill using the color defined for that gradient stop.
• ~gradientの各~色停の~offset値は、より前に与えられたすべての色停の~offset値~以上にすることが要求される — そうでない場合、当の~offset値は，より前に与えられたすべての~offset値の最~大に調整されることになる。 ◎ Each gradient offset value is required to be equal to or greater than the previous gradient stop's offset value. If a given gradient stop's offset value is not equal to or greater than all previous offset values, then the offset value is adjusted to be equal to the largest of all previous offset values.

• 2 個の色停の~offset値が同じである場合、後者の色停が重合する点における色~値を制御する。 ◎ If two gradient stops have the same offset value, then the latter gradient stop controls the color value at the overlap point. In particular:

  例えば次のものは：

  <stop offset="0" stop-color="white"/>
  <stop offset=".2" stop-color="red"/>
  <stop offset=".2" stop-color="blue"/>
  <stop offset="1" stop-color="black"/>
  

  近似的に，次と同じ効果になる： ◎ will have approximately the same effect as:

  <stop offset="0" stop-color="white"/>
  <stop offset=".1999999999" stop-color="red"/>
  <stop offset=".2" stop-color="blue"/>
  <stop offset="1" stop-color="black"/>
  

  この~gradientは、 `white^v から `red^v へ滑らかに進み, `red^v から `blue^v へ突如変化して, `blue^v から `black^v へ滑らかに進む。 ◎ which is a gradient that goes smoothly from white to red, then abruptly shifts from red to blue, and then goes smoothly from blue to black.