SVG 2 — Paint Servers: Solid Colors, Gradients, and Patterns（日本語訳）

14.1. 序論

この節は、塗り~serverを受持つ。塗り~serverは、所与の~objの［ `fill$p ／ `stroke$p ］として他所に見出される資源が定義する塗りを許容する手法であり、文書~全体にわたる資源の再利用を許容する。 ~objを［ ~fill／~stroke ］することについての一般的な論点は、 § 塗ng：~fill法と~stroke法を見よ。 ◎ This section covers Paint Servers, a method which allows the fill or stroke of an object to be defined by a resource found elsewhere. It allows resources to be reused throughout a document. See the section Painting: Filling and Stroking for a general discussion of filling and stroking objects.

~SVGは、塗り~serverとして［ `~gradient$, `~pattern$ ］を定義する。 ◎ SVG defines several types of paint servers: • Gradients, • Patterns.

~SVG-2要件：任意のもので図形を~fillする。 ◎ SVG 2 Requirement: Arbitrary fills for shapes.

解決： ~SVG-2は、任意な要素からの~fill法と~stroke法を~supportするモノトスル（`~~参照先＠http://www.w3.org/2011/10/28-svg-irc#T18-32-32$）。 ◎ Resolution: SVG 2 shall support filling and stroking from arbitrary elements.
目的： ~fillする~sourceとして、例えば動画や画像を利用することを許容する。 ◎ Purpose: To allow for example videos or images to be used as a fill source.
`Owner: Alex? (no action)^en

2 ~~種の塗り~server。図左は線型~gradient, 図右は~pattern。 ◎ Two types of paint servers. From left to right: A linear gradient. A pattern.

塗り~serverは、［ `fill$p ／ `stroke$p ］~propに`~URL参照$を含めることにより利用される（例： `fill="url(#MyLightPurple)"^c ）。 ◎ Paint servers are used by including a URL reference in a fill or stroke property (i.e. fill="url(#MyLightPurple)").

塗り~server要素は、`~prop$を先祖から継承するが，それを参照している要素からは継承しない。 ◎ properties inherit into a paint-server element from its ancestors; properties do not inherit from the element referencing the paint server element.

塗り~server要素は、直に描画されることは決してない。その用法は、［ `fill$p ／ `stroke$p ］~propを利用して参照する他にない。これらの要素に対する `display$p 値は、`~UA~stylesheet$により，常に `none^v に設定されるモノトスル — この宣言の重要度は，他のどの［ ~CSS規則／呈示~属性］よりも高いモノトスル。塗り~server要素は、要素~自身やその先祖の `display$p ~propの値を問わず，参照~用に可用になるとする。 ◎ Paint-server elements are never rendered directly; their only usage is as something that can be referenced using the fill and stroke properties. The display value for these elements 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. Paint-server elements are available for referencing even when the display property on the paint-server element or any of its ancestors is set to none.

14.1.1. 塗り~serverの~templateとしての利用-法

ほとんどの塗り~server要素は、 `href^a 属性を受容する — これにより、当の塗り~server要素と互換な別の塗り~server要素を~templateとして定義して，利用できるようになる。 ~template要素~用に定義された`複製-可能な属性$は、現在の要素~上に同名の属性が指定されていない場合に，初期~値に代えて利用される。加えて，現在の要素に`記述的~要素$以外の子~内容が無い場合、~template要素の子~内容が~cloneされ，それを置換する。 ◎ Most paint server elements accept an ‘href’ attribute, which can be used to define a compatible paint server element as a template. Attributes defined for the template element are used instead of the initial value if corresponding attributes are not specified on the current element. Furthermore, if the current element does not have any child content other than descriptive elements, than the child content of the template element is cloned to replace it.

注記： `pattern$e に対する記述的~内容の除外は、~SVG-2にて新たに~~導入された — ［ ~gradientの挙動, およびどの~SVG要素でも記述的~内容は妥当にするとする変更点］と一貫させるため。 ◎ The exclusion of descriptive content is new in SVG 2 for ‘pattern’, consistent with the behavior of gradients, and with changes to make descriptive content valid for any SVG element.

次も新たに~~導入された： ~template域外参照は、外部~file資源になってもヨイ（~SVG-11における異なる章による指導は、この~~点に関して一貫でなかった）／子~要素の“継承” は、~shadow~treeを通して表現される。 ◎ Also new: template cross-references may be to external file resources (different chapters in SVG 1.1 had inconsistent guidance on this point), and the "inheritance" of child elements is represented through a shadow tree.

~template法は、任意な~levelまで間接的にもなり得る（外部~file資源に対する~security制限sの~subjectになるため、参照は無効になり得る）。したがって，参照先の~template要素に［ `複製-可能な属性$が定義されていない／関連な子~内容が無い］場合、［属性~値／~cloneされる内容］は，当の~templateの自前の `href^a 属性が参照する別の要素から導出される。 ◎ Templating can be indirect to an arbitrary level (subject to security limits on external file resources, which can make a reference invalid). Thus, if the referenced template element does not have relevant child content or does not define the specified attribute, then the attribute value or cloned content is derived from another element referenced by the template's own ‘href’ attribute.

この章における各 `href^a 属性の記述は、次に挙げる~template法の処理-に対する制限-を定義する： ◎ The description of each ‘href’ attribute in this chapter defines the limits of the templating process, as follows:

参照先の要素として，どの型の要素が妥当になるか。 ◎ What type of element is a valid target for the reference
当の~templateからどの属性を複製し得るか — これらは `複製-可能な属性@ と総称される。【この用語は、他所の記述を明確化するため，この訳に導入している。】 ◎ Which attributes are duplicated from the template

所与の塗り~server要素 %現-要素に対し，［ `複製-可能な属性$のうち， %現-要素上に定義されていないものがある／ %現-要素には`記述的~要素$以外に子~要素が無い］場合、~UAは ~URLを処理して参照先の資源を識別した上で、~URL参照は`無効な値$でないならば，参照先の要素を次に従って~template要素として利用するモノトスル： ◎ If any of the specified attributes are not defined on the current element, or if the current element has no child elements other than descriptive elements, the user agent must process the URL to identify the referenced resource. If the URL reference is not invalid, then the URL's target element is used as the template element, as follows:

［ `複製-可能な属性$のうち， %現-要素上に定義されていないもの］に対しては、~template要素~用に属性の値を決定して，それを %現-要素用の値として利用するモノトスル。 ~template値は、要求されるなら，再帰的に域外参照から導出される。当の属性~用の初期~値は、妥当な~URL参照がすべて尽きたときに限り，利用される。 ◎ For any of the specified attributes not defined on the current element, the user agent must determine the value of the attribute for the template element and use it as the value for the current element. The template value is derived from recursive cross-references if required. The initial value for the attribute is only substituted after all valid URL references are exhausted.
%現-要素に`記述的~要素$以外の子~要素は無い場合、 %現-要素用に`~shadow~tree$を生成するモノトスル。それは、［ %現-要素が~hostになる］ことを除いて，`~use要素の~shadow~tree$と等価に挙動するモノトスル。 ~shadow~treeの中に~cloneされる`要素~instance$用の`対応している要素$は、次で与えられる： ◎ If the current element has no child elements other than descriptive elements, the user agent must generate a shadow tree for this element, which must behave equivalently to a use-element shadow tree, except that the host is the current paint server element. The corresponding elements for the element instances cloned into the shadow tree are:
- ~template要素に`記述的~要素$以外の子~要素が在るならば，~template要素の子~内容。 ◎ the child content of the template element, if it has child elements other than descriptive elements,
- 他の場合、［ ~template要素が自前の`~shadow~tree$を生成するときに利用されることになるもの］に`対応している要素$。 ◎ the corresponding elements that are used, or would be used, to generate the template element's own shadow tree, otherwise.

ある塗り~server要素が~shadow~treeを持つときは、その~tree内の`要素~instance$を — それらが塗り~server要素の自前の子であったかのように — 当の塗り~serverによる効果の描画に利用するモノトスル。 ◎ When a paint-server element has a shadow tree, the element instances in that tree must be used in rendering the paint server effect, as if they were the paint server element's own children.

注記： ~template法のための`~use要素の~shadow~tree$の~modelは、~cloneされる内容が元の内容と異なる~styleを継承することを許容する。この挙動は、~SVG-2にて新たに定義された。 ~SVG-11では、継承した塗り~server内容に~styleがどう適用されるか定義していなかった。 ◎ The use-element shadow tree model for templating allows cloned content to inherit different styles than the original. This behavior is newly defined in SVG 2; SVG 1.1 did not define how styles applied to inherited paint server content.

14.2. ~gradient

~gradientは、各~点の合間で色を滑らかに遷移する描きを成す。 ~SVGが供する~gradientには、［ `線型~gradient$, `放射型~gradient$ ］の 2 種がある。 ◎ Gradients consist of smooth color transitions between points on a drawing surface. SVG provides for three types of gradients: • linear gradients, • radial gradients.

~gradientが定義されたなら、`~graphics要素$は，その~gradientを参照するように［ `fill$p ／ `stroke$p ］~propを設定することにより，~gradientで［ ~fill／~stroke ］できるようになる。 ◎ Once a gradient is defined, a graphics element can be filled or stroked with the gradient by setting the fill or stroke properties to reference the gradient.

~gradientは、次のようにして塗られる：

各~gradientには、 `~gradient~vector@ が定義される。
~gradient~vector上の各~点の色は、~vectorに沿って置かれる一連の`色停$により定義される。
~gradient~vectorに垂直に交差している各~gradient法線 — 線型~gradientにおいては直線／放射型~gradientにおいては真円 — は、~gradient~vectorとの交点における色で塗られる。【放射型~gradientの法線は、以下では “輪（ `ring^en ）” とも称される。】

◎ Color transitions for linear and radial gradients are defined by a series of color stops along a gradient vector. A gradient normal defines how the colors in a vector are painted to the surface. For a linear gradient, a normal is a line perpendicular to the vector. For a radial gradient, a normal is a circle intersecting the vector at a right angle. Each gradient normal is painted with one color determined by the vector.

線型~gradient（図左）と放射型~gradient（図右）。各~gradientには、~gradient~vectorと［ ~vector上の 1 点に交差する 1 本の~gradient法線］が示されている。 ~vector上には、 3 個の色停（図の丸印）がある。 ◎ Linear and radial gradients with the gradient vector indicated. The vector consists of three stops shown by small circles. One gradient normal is shown for each gradient.

［線型~gradient／放射型~gradient ］における`~gradient~vector$上の点 %P1, %P2 に置かれた 2 個の色停の合間にある点 %P に交差する法線の色~値は、各~channelごとに，両~色停の色を［点 %P1, %P2 から %P までの距離による加重平均］として線型に補間して計算される ⇒ %結果 ~EQ %C1 ~PLUS ( %C2 ~MINUS %C1 ) ~MUL ( %距離 ~MINUS %O1 ) ~DIV ( %O2 ~MINUS %O1 ) ◎ For linear and radial gradients, the color value between two stops along the gradient vector is the linear interpolation, per channel, of the color for each stop, weighted by the distance from each stop. ◎ $V = C0.rgba + (C1.rgba - C0.rgba) * ((D - C0.offset) / (C1.offset - C0.offset));

ここで、各~channelに対し： ◎ Where, for each channel:

%結果は~channel用に補間された結果 ◎ V is the interpolated result for that channel
%C1, %O1 は %P1 の色, ~offset ◎ C0 is the stop color for the stop with the lowest offset ◎ O0 is the offset of C0
%C2, %O2 は %P2 の色, ~offset ◎ C1 is the other stop color ◎ O1 is the offset of C1
%距離は`~gradient~vector$の始端から %P までの距離 ◎ D is the distance along the gradient vector

~gradientを参照している`~graphics要素$ %要素は、概念的には，~gradient法線を伴う~gradient~vectorの複製をとって，それを自前の幾何の一部として扱うベキである。 %要素の幾何に適用される座標系変換は、複製された~gradient~vectorや~gradient法線にも適用される。参照先の~gradient上に指定された `gradientTransform^a による変形は、 %要素上の座標系変換が~gradientに適用される前に適用される。 ◎ When a graphics element references a gradient, conceptually the graphics element should take a copy of the gradient vector with gradient normals and treat it as part of its own geometry. Any transformations applied to the graphics element geometry also apply to the copied gradient vector and gradient normals. Any gradient transforms that are specified on the reference gradient are applied before any graphics element transformations are applied to the gradient.

14.2.1. 定義

`~gradient要素@ は、~gradient塗り~serverを定義する。この仕様は、~gradient要素として［ `linearGradient$e, `radialGradient$e ］を定義する。 ◎ gradient element A gradient element is one that defines a gradient paint server. This specification defines the following gradient elements: ‘linearGradient’ and ‘radialGradient’.

14.2.2. 線型~gradient

`linearGradient$e 要素が線型~gradientを定義する。 ◎ Linear gradients are defined by a ‘linearGradient’ element.

◎要素名 `linearGradient@e ◎分類 `~gradient要素$, `決して描画されない要素$, `塗り~server要素$ ◎内容任意個数, 任意順序の，次に挙げる要素 ⇒＃ `記述的~要素$, `animate$e, `animateTransform$e, `script$e, `set$e, `stop$e, `style$e ◎属性 `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `非推奨にされた~XLink属性$, `x1$aL, `y1$aL, `x2$aL, `y2$aL, `gradientUnits$aL, `gradientTransform$aL, `spreadMethod$aL, `href$aL ◎界面 `SVGLinearGradientElement$I ◎表終

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.

`spreadMethod^a 用にアリな 3 種の値の説明図 — 図左から `pad^v, `reflect^v, `repeat^v 。 ~gradient~vectorは、限界~boxの横幅の 40% から 60% までにわたる。 ◎ Illustration of the three possible values for spreadMethod, from left to right: pad, reflect, repeat. The gradient vector spans from 40% to 60% of the bounding box width.

◎属名 `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.

例 `lingrad01@xl に、線型~gradient塗り~serverを参照して矩形を~fillする方法を示す。 ◎ Example lingrad01 shows how to fill a rectangle by referencing a linear gradient paint server.

<?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>

例 `lingrad01^xl ◎ Example lingrad01

`pservers/lingrad01.svg^viewAs

14.2.3. 放射型~gradient

`radialGradient$e 要素が放射型~gradientを定義する。 ◎ Radial gradients are defined by a ‘radialGradient’ element.

◎要素名 `radialGradient@e ◎分類 `~gradient要素$, `決して描画されない要素$, `塗り~server要素$ ◎内容任意個数, 任意順序の，次に挙げる要素 ⇒＃ `記述的~要素$ `animate$e, `animateTransform$e, `script$e, `set$e, `stop$e, `style$e ◎属性 `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `非推奨にされた~XLink属性$, `cx$aR, `cy$aR, `r$aR, `fx$aR, `fy$aR, `fr$aR, `gradientUnits$aR, `gradientTransform$aR, `spreadMethod$aR, `href$aR ◎界面 `SVGRadialGradientElement$I ◎表終

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にて新たに追加された。 ◎ ↓↓

この図式は、 `fr$aR は `r$aR の 50% である事例に対し，各種~幾何-属性がどう定義されるかを示す。丸印は終端円（最も外縁の真円）の中心（ `cx$aR, `cy$aR ）， ✕印は始端円（最も内縁の真円）の中心（ `fx$aR, `fy$aR ）を表す。 2 本の破線は`~gradient~vector$を示す。 ~vectorは、始端円と終端円~上の対応する点を接続する。終端円の外側にある領域は最後の `stop-color$p で塗られ，始端円の内側にある領域は最初の `stop-color$p で塗られる。

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

`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

~SVG-2要件：真円~上に焦点を伴う放射型~gradientを明確化する。 ◎ SVG 2 Requirement: Clarify radial gradients with focal point on the circle.

解決： `spreadMethod$aR が `repeat^v にされていて，焦点が真円を辺~上にある場合、繰返される色~用の最初の色停から最後の色停までの距離は 0 であり、塗りはすべての~gradient色停の（~offsetによる）加重平均による色を生成するベキである（`~~参照先＠http://www.w3.org/2011/07/29-svg-minutes.html#item05$） ◎ Resolution: When the focal point is on the circle edge, with repeat, then the distance between the first and last stop for the repeating colors is 0 and the paint should generate a color that is the average of all the gradient stops.
目的：放射型~gradientの相互運用能を改善する。 ◎ Purpose: To improve interoperability of radial gradients.
Owner: Erik (`3097$ACTION)

注記： ~SVG-11は、上の最初の項に該当する場合に何をするか定義していなかった。その項に述べるようにふるまうベキであると解決された。 ◎ Note: SVG 1.1 does not define what to do when the focal point is on the circle edge, with 'repeat'. The distance between the first and last stop for the repeating colors is 0. It was resolved that the paint should generate a color that is the weighted average (by offset) of all the gradient stops.

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。 ~gradientの `spreadMethod$aR は `reflect^v にされているとする。 ◎ A radial gradient with the focal (start) circle outside the end circle. The focal circle is the smaller circle on the right. The gradient has spreadMethod="reflect".

2 つの放射型~gradient — 両者とも `spreadMethod$aR は `repeat^v にされている。図左の~gradientの焦点は［ `cx$aR, `cy$aR, `r$aR ］により定義される終端円の内側, 右寄りにある。図右の~gradientの焦点はちょうど終端円~上にあり、周囲の右方にある区画に塗られる~fillは，~gradient~vector上の各~色の加重平均に等しくなる。 ◎ Two radial gradients with spreadMethod="repeat". On the left, the focal point is just inside the right side of the circle defined by ‘cx’, ‘cy’, and ‘r’. On the right, the focal point is on the circle. In this case, the area painted to the right of the circumference has a fill equal to the weighted average of the colors in the gradient vector.

注記：右図における~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.

例 `radgrad01@xl に、放射型~gradient塗り~serverを参照して矩形を~fillする方法を示す。 ◎ Example radgrad01 shows how to fill a rectangle by referencing a radial gradient paint server.

<?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>

例 `radgrad01^xl ◎ Example radgrad01

`pservers/radgrad01.svg^viewAs

14.2.4. ~gradientの色停

~gradient内で利用する色は、［ `linearGradient$e ／ `radialGradient$e ］要素の子~要素である `stop$e 要素により定義される。 ◎ The vector of colors to use in a gradient is defined by the ‘stop’ elements that are child elements to a ‘linearGradient’, or ‘radialGradient’ element. ◎ 和訳省略 In SVG 1.1, the above read: "The ramp of colors..." but "ramp" is used nowhere else in this section.

◎要素名 `stop@e ◎分類なし ◎内容任意個数, 任意順序の，次に挙げる要素 ⇒＃ `animate$e, `script$e, `set$e, `style$e ◎属性 `中核~属性$, `大域~event属性$, `文書~要素~event属性$, `呈示~属性$, `offset$a, ◎界面 `SVGStopElement$I ◎表終

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-color@p ◎値 `color$tp ◎初 `black^v ◎適 `stop$e 要素 ◎継されない ◎百受容しない ◎算【未策定】 ◎ア算出d値の型による ◎表終

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

◎名 `stop-opacity@p ◎値 `opacity$tp ◎初 `1^v ◎適 `stop$e 要素 ◎継されない ◎百受容しない ◎算指定d値を `number^t に換算して， 0 以上 1 以下の範囲に切詰めた結果 ◎ the specified value converted to a number, clamped to the range [0,1] ◎ア算出d値の型による ◎表終

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

14.3. ~pattern

~patternは、予め定義-済みな~graphic~objを利用して，別の~objを — その［ `fill$p ／ `stroke$p ］により塗られる区画を覆うように — 一定周期で繰り~~返して（“敷き詰めて”）塗るために利用される。 ~patternは `pattern$e 要素を利用して定義され、`~graphics要素$上の［ `fill$p ／ `stroke$p ］~propから参照される — それは、~graphics要素を~patternで［ ~fill／~stroke ］することを指示する。 ◎ A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using a ‘pattern’ element and then referenced by properties fill and stroke on a given graphics element to indicate that the given element shall be filled or stroked with the pattern.

［ `x$aP, `y$aP, `width$aP, `height$aP, および `patternUnits$aP ］属性は、~canvas上に基準~矩形を定義する — 基準~矩形の左上隅は ( %x, %y ), 右下隅は ( %x ~PLUS %width, %y ~PLUS %height ) にとられる。理論的には、この矩形が， X, Y 両方向に（および正な, 負な両方向に）無限に敷き詰められる — 各整数~組［ %m, %n ］に対し，左上隅を ( %x ~PLUS %m ~MUL %width, %y ~PLUS %n ~MUL %height ) にずらした矩形で。 ◎ Attributes ‘x’, ‘y’, ‘width’, ‘height’ and ‘patternUnits’ define a reference rectangle somewhere on the infinite canvas. The reference rectangle has its top/left at (x, y) and its bottom/right at (x + width, y + height). The tiling theoretically extends a series of such rectangles to infinity in X and Y (positive and negative), with rectangles starting at (x + m*width, y + n* height) for each possible integer value for m and n.

◎要素名 `pattern@e ◎分類 `容器~要素$, `決して描画されない要素$, `塗り~server要素$ ◎内容任意個数, 任意順序の，次に挙げる要素 ⇒＃ `~animation要素$ `記述的~要素$ `塗り~server要素$ `図形~要素$ `構造上の要素$ `a$e, `clipPath$e, `filter$e, `foreignObject$e, `image$e, `marker$e, `mask$e, `script$e, `style$e, `switch$e, `text$e, `view$e ◎属性 `中核~属性$, `大域~event属性$, `呈示~属性$, `非推奨にされた~XLink属性$, `viewBox$a, `preserveAspectRatio$a, `x$aP, `y$aP, `width$aP, `height$aP, `patternUnits$aP, `patternContentUnits$aP, `patternTransform$aP, `href$aP ◎界面 `SVGPatternElement$I ◎表終

14.3.1. 属性

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

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

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

`userSpaceOnUse^v: `pattern$e 要素の参照元の利用元~座標系（すなわち，［ `fill$p ／ `stroke$p ］~propを介して当の `pattern$e 要素を参照している要素~用の利用元~座標系）。ただし，百分率は、現在の~SVG表示域に相対的な値を表現する。 ◎ If patternUnits="userSpaceOnUse", ‘x’, ‘y’, ‘width’ and ‘height’ represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the ‘pattern’ element is referenced (i.e., the user coordinate system for the element referencing the ‘pattern’ element via a fill or stroke property) and then applying the transform specified by attribute ‘patternTransform’. Percentages represent values relative to the current SVG viewport.
`objectBoundingBox^v: ~patternが適用される要素の`限界~box$を利用して確立される座標系（`~obj限界~box単位$を見よ）。ただし，百分率は、この`限界~box$に相対的な値を表現する。 ◎ If patternUnits="objectBoundingBox", the user coordinate system for attributes ‘x’, ‘y’, ‘width’ and ‘height’ is established using the bounding box of the element to which the pattern is applied (see Object bounding box units) and then applying the transform specified by attribute ‘patternTransform’. Percentages represent values relative to the bounding box for the object.

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

`pattern$e の内容~用の座標系を定義する。 `viewBox$a 属性が指定されている場合、この属性には効果は無いことに注意。 ◎ Defines the coordinate system for the contents of the ‘pattern’. Note that this attribute has no effect if attribute ‘viewBox’ is specified. ◎ Value userSpaceOnUse | objectBoundingBox initial value userSpaceOnUse Animatable yes

各種~値が定義する座標系は、 `patternUnits$aP 用の同じ名前の値と同じに定義される。 ◎ If patternContentUnits="userSpaceOnUse", the user coordinate system for the contents of the ‘pattern’ element is the coordinate system that results from taking the current user coordinate system in place at the time when the ‘pattern’ element is referenced (i.e., the user coordinate system for the element referencing the ‘pattern’ element via a fill or stroke property) and then applying the transform specified by attribute ‘patternTransform’. ◎ If patternContentUnits="objectBoundingBox", the user coordinate system for the contents of the ‘pattern’ element is established using the bounding box of the element to which the pattern is applied (see Object bounding box units) and then applying the transform specified by attribute ‘patternTransform’.

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

~pattern座標系から~target座標系（すなわち， `userSpaceOnUse^v ／ `objectBoundingBox^v ）への追加的な変形nの定義を包含する（省略時は変形なし）。これにより、~pattern~tileを斜傾するなどが可能になる。この追加的な変形n行列は、それまでに定義された変形n — `~obj限界~box単位$を利用元~座標系に換算するために必要yな暗黙的な変形nも含む — に右から乗算する（すなわち，~listの末尾に挿入される）。 ◎ Contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system (i.e., 'userSpaceOnUse' or 'objectBoundingBox'). This allows for things such as skewing the pattern tiles. 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

◎属名 `x@aP, `y@aP, `width@aP, `height@aP ◎属値 `length$t `†$ ◎属初 `0^v ◎属ア可 ◎表終 ◎ x ◎ ↓

［ `x$aP, `y$aP, `width$aP, `height$aP ］は、~pattern~tileがどこに配置されるかを指示する。これらの属性は［ `patternUnits$aP, `patternTransform$aP ］属性の組合nにより指定された座標~空間における座標と値を表現する。 ◎ ‘x’, ‘y’, ‘width’ and ‘height’ indicate how the pattern tiles are placed and spaced. These attributes represent coordinates and values in the coordinate space specified by the combination of attributes ‘patternUnits’ and ‘patternTransform’. ◎ Value <length> initial value 0 Animatable yes ◎ y ◎ See ‘x’. ◎ Value <length> initial value 0 Animatable yes ◎ width ◎ See ‘x’. ◎ Value <length> initial value 0 Animatable yes

`width$aP, `height$aP 属性に対しては ⇒ 負な値は ~error（`~error処理$secを見よ）。値 0 は、要素の描画を不能化する（すなわち，適用される塗りは無い）。 ◎ A negative value is an error (see Error processing). A value of zero disables rendering of the element (i.e., no paint is applied). ◎ height ◎ See ‘x’. ◎ Value <length> initial value 0 Animatable yes ◎ A negative value is an error (see Error processing). A value of zero disables rendering of the element (i.e., no paint is applied).

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

~template要素への`~URL参照$。 `pattern$e 要素が妥当になるためには、異なる要素を参照していなければナラナイ。 ◎ A URL reference to a template element, which must be a different ‘pattern’ element to be valid.

`pattern$e 要素にて`複製-可能な属性$は ⇒＃ `x$aP, `y$aP, `width$aP, `height$aP, `viewBox$a, `preserveAspectRatio$a, `patternTransform$aP, `patternUnits$aP, `patternContentUnits$aP ◎ The specified attributes that will be copied from the template are: • ‘x’ • ‘y’ • ‘width’ • ‘height’ • ‘viewBox’ • ‘preserveAspectRatio’ • ‘patternTransform’ • ‘patternUnits’ • ‘patternContentUnits’ ◎ Value URL [URL] initial value empty Animatable yes

14.3.2. ~patternに対する注記

~SVGの`~UA~stylesheet$は、 `pattern$e 要素~用の `overflow$p ~propを `hidden^v に設定する。それは、~pattern~tileの限界域に矩形な切抜き~pathを作成させる。 `overflow$p ~propが上書きされない限り，［ ~patternの中の，この矩形の外側にある~graphic ］は切取られることになる。例 `pattern01$xl に~pattern~tileに対する切抜きの効果を示す。 ◎ SVG's user agent style sheet sets the overflow property for ‘pattern’ elements to hidden, which causes a rectangular clipping path to be created at the bounds of the pattern tile. Unless the overflow property is overridden, any graphics within the pattern which goes outside of the pattern rectangle will be clipped. Example pattern01 below shows the effect of clipping to the pattern tile.

注記： `overflow$p ~propが `visible^v に設定された場合、［ ~patternの中の，~patternの限界域の外側にある~graphic ］に対する描画の挙動は，現時点では定義されていないことに注意。 ~SVGの将来~versionは、~overflowを示すよう要求し得る。 ~SVG実装者には、~overflowを描画することが奨励される — それが作者から期待される挙動なので。 ~overflowを描画する場合、 x 軸~方向に並ぶ~pattern~tileたちは左から右の順に, これらの各~並びは上から下の順に描画するベキである。 ◎ Note that if the overflow property is set to visible the rendering behavior for the pattern outside the bounds of the pattern is currently undefined. A future version of SVG may require the overflow to be shown. SVG implementers are encouraged to render the overflow as this is the behavior expected by authors. If overflow is rendered, the pattern tiles should be rendered left to right in rows and the rows from top to bottom.

`129$issue を見よ。 ◎ See GitHub Issue 129

`pattern$e 要素の内容は、新たに確立される座標系に相対的である。要素に `viewBox$a 属性が在る場合、この座標系は，［ `viewBox$a , `preserveAspectRatio$a ］用の標準~規則を利用して，要素~上の［ `x$aP, `y$aP, `width$aP, `height$aP, `patternUnits$aP ］属性により定義される領域の中に収まるように確立される。 `viewBox$a 属性は無い場合、この座標系は，要素~上の［ `x$aP, `y$aP ］属性を原点にとるように確立される。 ◎ The contents of the ‘pattern’ are relative to a new coordinate system. If there is a ‘viewBox’ attribute, then the new coordinate system is fitted into the region defined by the ‘x’, ‘y’, ‘width’, ‘height’ and ‘patternUnits’ attributes on the ‘pattern’ element using the standard rules for ‘viewBox’ and ‘preserveAspectRatio’. If there is no ‘viewBox’ attribute, then the new coordinate system has its origin at (x, y), where x is established by the ‘x’ attribute on the ‘pattern’ element, and y is established by the ‘y’ attribute on the ‘pattern’ element.＼

したがって，次の例では： ◎ Thus, in the following example:

<pattern x="10" y="10" width="20" height="20">
  <rect x="5" y="5" width="10" height="10"/>
</pattern>

矩形の左上隅は、~pattern~tileの原点から［右へ 5 単位, 下へ 5 単位］の所にある。 ◎ the rectangle has its top/left located 5 units to the right and 5 units down from the origin of the pattern tile.

`viewBox$a 属性は、補足的な座標系変換を導入する。それは、［［ `x$aP, `y$aP, `width$aP, `height$aP, `patternUnits$aP ］属性に因り新たな~pattern座標系を作成するために必要yな座標系変換］の上に（ `on top of^en †）適用される。 ◎ The ‘viewBox’ attribute introduces a supplemental transformation which is applied on top of any transformations necessary to create a new pattern coordinate system due to attributes ‘x’, ‘y’, ‘width’, ‘height’ and ‘patternUnits’.

【† 変形~listにおいて、より末尾側に付加する。言い換えれば、~patternを成す図形を定義する座標には， `viewBox^a による座標系変換が先に適用され、これらの座標のうち `viewBox^a が定義する矩形に入るもののみが可視になる。】

`pattern$e 要素の内容に付与された ~event属性と~event~listener は、処理されない — 処理されるのは `pattern$e 要素の描画の側面に限られる。 ◎ Event attributes and event listeners attached to the contents of a ‘pattern’ element are not processed; only the rendering aspects of ‘pattern’ elements are processed.

例 `pattern01@xl に，~pattern塗り~serverを参照して矩形を~fillする方法を示す。各~三角形を成す `blue^v ~strokeの上端と左端が少し切取られる様子に注意。これは、~SVGの`~UA~stylesheet$が `pattern$e 要素~用の `overflow$p ~propを — ~patternが~pattern~tileの限界域に切抜かれるよう — `hidden^v に設定していることに因る。 ◎ Example pattern01 shows how to fill a rectangle by referencing a pattern paint server. Note how the blue stroke of each triangle has been slightly clipped at the top and the left. This is due to SVG's user agent style sheet setting the overflow property for ‘pattern’ elements to hidden, which causes the pattern to be clipped to the bounds of the pattern tile.

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

  <title>Example pattern01</title>
  <desc>
~pattern塗り~serverを利用して楕円を~fillする。
◎
Fill an ellipse using a pattern paint server.
</desc>

  <defs>
    <pattern id="TrianglePattern"
	     patternUnits="userSpaceOnUse"
             x="0" y="0" width="50" height="50"
             viewBox="0 0 10 10" >
      <path d="M 0 0 L 7 0 L 3.5 7 z"
	    fill="plum"
	    stroke="blue" />
    </pattern> 
  </defs>

  <!-- 
楕円は
三角形~pattern塗り~serverを利用して~fillされる
◎
The ellipse is filled using a triangle pattern paint server
 -->
  <ellipse fill="url(#TrianglePattern)"
	   stroke="black"
	   stroke-width="2"
           cx="150" cy="100" rx="125" ry="75" />
</svg>

例 `pattern01^xl ◎ Example pattern01

`pservers/pattern01.svg^viewAs

14.4. ~DOM~interface

14.4.1. ~interface `SVGGradientElement^I0

`SVGGradientElement$I ~interfaceは、各種 ~gradient塗り~server要素~用の~interface用の基底~interfaceとして利用される。 ◎ The SVGGradientElement interface is used as a base interface for gradient paint server element interfaces.

[Exposed=Window]
interface `SVGGradientElement^dfn : `SVGElement$I {

  // Spread Method Types
  const unsigned short `SVG_SPREADMETHOD_UNKNOWN$m = 0;
  const unsigned short `SVG_SPREADMETHOD_PAD$m = 1;
  const unsigned short `SVG_SPREADMETHOD_REFLECT$m = 2;
  const unsigned short `SVG_SPREADMETHOD_REPEAT$m = 3;

  [SameObject] readonly attribute `SVGAnimatedEnumeration$I `gradientUnits$m;
  [SameObject] readonly attribute `SVGAnimatedTransformList$I `gradientTransform$m;
  [SameObject] readonly attribute `SVGAnimatedEnumeration$I `spreadMethod$m;
};

`SVGGradientElement$I includes `SVGURIReference$I;

`SVGGradientElement$I 上に定義される `spreadMethod^a 用の数量-定数は、 `spreadMethod^a 属性がとり得る~keyword値を表現するために利用される。それらは、次の表tに従って対応する： ◎ The numeric spread method type constants defined on SVGGradientElement are used to represent the keyword values that the ‘spreadMethod’ attribute can take. Their meanings are as follows:

定数	~keyword
`SVG_SPREADMETHOD_PAD@m	`pad^v
`SVG_SPREADMETHOD_REFLECT@m	`reflect^v
`SVG_SPREADMETHOD_REPEAT@m	`repeat^v
`SVG_SPREADMETHOD_UNKNOWN@m	他の何らかの値

◎ Constant Meaning SVG_SPREADMETHOD_PAD The pad keyword. SVG_SPREADMETHOD_REFLECT The reflect keyword. SVG_SPREADMETHOD_REPEAT The repeat keyword. SVG_SPREADMETHOD_UNKNOWN Some other value.

`gradientUnits@m

`gradientUnits^a 内容~属性を`反映する$。 ~gradient要素~上の `gradientUnits^a 属性~用の`数量-型~値$は、次に従う: ◎ The gradientUnits IDL attribute reflects the ‘gradientUnits’ content attribute. The numeric type values for ‘gradientUnits’ attributes on gradient elements are as follows:

内容~属性の値	数量-型~値
`userSpaceOnUse^v	`SVG_UNIT_TYPE_USERSPACEONUSE$n
`objectBoundingBox^v	`SVG_UNIT_TYPE_OBJECTBOUNDINGBOX$n

◎ Value Numeric type value userSpaceOnUse SVG_UNIT_TYPE_USERSPACEONUSE objectBoundingBox SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

`gradientTransform@m

［ `linearGradient$e ／ `radialGradient$e ］要素~用の［ `transform$p ~prop, `gradientTransform^a 呈示~属性］の算出d値を`反映する$。 ◎ The gradientTransform IDL attribute reflects the computed value of the transform property and the 'gradientTransform' presentation attribute for ‘linearGradient’ and ‘radialGradient’ elements.

`spreadMethod@m

`spreadMethod^a 内容~属性を`反映する$。 ~gradient要素~上の `spreadMethod^a 属性~用の`数量-型~値$は、上に述べたそれ用の数量-定数~表tに従う。 ◎ The spreadMethod IDL attribute reflects the ‘spreadMethod’ content attribute. The numeric type values for ‘spreadMethod’ attributes on gradient elements are as described above in the numeric spread type constant table.

14.4.2. ~interface `SVGLinearGradientElement^I0

`SVGLinearGradientElement$I ~objは、~DOMにおいて `linearGradient$e 要素を表現する。 ◎ An SVGLinearGradientElement object represents an ‘linearGradient’ in the DOM.

[Exposed=Window]
interface `SVGLinearGradientElement^dfn : `SVGGradientElement$I {
  [SameObject] readonly attribute `SVGAnimatedLength$I `x1$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `y1$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `x2$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `y2$m;
};

`x1@m
`y1@m
`x2@m
`y2@m: 順に［ `x1$aL, `y1$aL, `x2$aL, `y2$aL ］内容~属性を`反映する$。 ◎ The x1, y1, x2 and y2 IDL attributes reflect the ‘x1’, ‘y1’, ‘x2’ and ‘y2’ content attributes, respectively

14.4.3. ~interface `SVGRadialGradientElement^I0

`SVGRadialGradientElement$I ~objは、~DOMにおいて `radialGradient$e 要素を表現する。 ◎ An SVGRadialGradientElement object represents an ‘radialGradient’ in the DOM.

[Exposed=Window]
interface `SVGRadialGradientElement^dfn : `SVGGradientElement$I {
  [SameObject] readonly attribute `SVGAnimatedLength$I `cx$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `cy$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `r$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `fx$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `fy$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `fr$m;
};

`cx@m
`cy@m
`r@m
`fx@m
`fy@m
`fr@m: 順に［ `cx$aR, `cy$aR, `r$aR, `fx$aR, `fy$aR, `fr$aR ］内容~属性を`反映する$ ◎ The cx, cy, r, fx, fy and fr IDL attributes reflect the ‘cx’, ‘cy’, ‘r’, ‘fx’, ‘fy’ and ‘fr’ content attributes, respectively

14.4.4. ~interface `SVGStopElement^I0

`SVGStopElement$I ~objは、~DOMにおいて `stop$e 要素を表現する。 ◎ An SVGStopElement object represents a ‘stop’ element in the DOM.

[Exposed=Window]
interface `SVGStopElement^dfn : `SVGElement$I {
  [SameObject] readonly attribute `SVGAnimatedNumber$I `offset$m;
};

`offset@m: `offset$a 内容~属性を`反映する$。 ◎ The offset IDL attribute reflects the ‘offset’ content attribute.

注記： `SVGStopElement$I には、その `path$e 属性【？】を`反映する$ ~IDL属性は無いことに注意。 ◎ Note that SVGStopElement does not have a reflecting IDL attribute for its ‘path’ attribute.

14.4.5. ~interface `SVGPatternElement^I0

`SVGPatternElement$I ~objは、~DOMにおいて `pattern$e 要素を表現する。 ◎ An SVGPatternElement object represents a ‘pattern’ element in the DOM.

[Exposed=Window]
interface `SVGPatternElement^dfn : `SVGElement$I {
  [SameObject] readonly attribute `SVGAnimatedEnumeration$I `patternUnits$m;
  [SameObject] readonly attribute `SVGAnimatedEnumeration$I `patternContentUnits$m;
  [SameObject] readonly attribute `SVGAnimatedTransformList$I `patternTransform$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `x$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `y$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `width$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `height$m;
};

`SVGPatternElement$I includes `SVGFitToViewBox$I;
`SVGPatternElement$I includes `SVGURIReference$I;

`patternUnits@m

`patternContentUnits@m

順に［ `patternUnits$aP, `patternContentUnits$aP ］内容~属性を`反映する$。これらの内容~属性~用の`数量-型~値$は、次に従う： ◎ The patternUnits and patternContentUnits IDL attributes reflect the ‘patternUnits’ and ‘patternContentUnits’ content attributes, respectively. The numeric type values for ‘patternUnits’ and ‘patternContentUnits’ are as follows:

内容~属性の値	数量-型~値
`userSpaceOnUse^v	`SVG_UNIT_TYPE_USERSPACEONUSE$n
`objectBoundingBox^v	`SVG_UNIT_TYPE_OBJECTBOUNDINGBOX$n

◎ Value Numeric type value userSpaceOnUse SVG_UNIT_TYPE_USERSPACEONUSE objectBoundingBox SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

`patternTransform@m

［ `transform$p ~propの算出d値, `patternTransform^a 呈示~属性］を`反映する$。 ◎ The patternTransform IDL attribute reflects the computed value of the transform property and the ‘patternTransform’ presentation attribute.

`x@m

`y@m

`width@m

`height@m

順に［ `x$aP, `y$aP, `width$aP, `height$aP ］内容~属性を`反映する$。 ◎ The x, y, width and height IDL attributes reflect the ‘x’, ‘y’, ‘width’ and ‘height’ content attributes, respectively.