~SVG-2の描画~modelは、 `組成＆混色 仕様$に定義される 規則に従うことになる。 ◎ The SVG 2 rendering model will follow the rules defined by the Compositing and Blending specification.
Resolution: `Seattle/Paris 2012 F2F day 3＠http://www.w3.org/2012/07/24-svg-minutes.html#item09$
Owner: Nikos (Action 3332).
Status: Done.
3.1. 序論
~SVGの実装は、 描画~modelをこの章に述べるように実装するモノトスル — ただし、実際の実装が逸脱してもヨイ状況もあり， `適合性~要件$にて どこまで逸脱できるかを述べる。 実施においては、 出力~装置の制限 （例：~supportする色の範囲が制限されているなど） に基づく~~多様性， あるいは数学的に精確な~modelを実装する際の実施上の制限によるそれ （例：実現可能な処理能と精確さはおよそ反比例するので、 必要な近似は，適合性~要件に合致するに足りればよい） は、許容される。 ◎ Implementations of SVG must implement the rendering model as described in this chapter, as modified in the appendix on conformance requirements which describes situations where an implementation may deviate. In practice variability is allowed based on limitations of the output device (e.g. only a limited range of colors might be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves are approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements). ◎ ＊重複 The appendix on conformance requirements describes the extent to which an actual implementation may deviate from this description. In practice an actual implementation may deviate slightly because of limitations of the output device (e.g. only a limited range of colors might be supported) and because of practical limitations in implementing a precise mathematical model (e.g. for realistic performance curves are approximated by straight lines, the approximation need only be sufficiently precise to match the conformance requirements).
3.2. 描画~tree
~SVG文書が~~最終的に描画される表現を成す各~成分は、 ~DOM~tree内にある下層の要素と一対一には対応しない。 ~graphicの外観は、 代わりに，［ 描画~treeと呼ばれる，~DOM~treeに並行する構造 ］を反映する — そこでは、 除外される要素もあれば，繰返される要素もある。 ◎ The components of the final rendered representation of an SVG document do not have a one-to-one relationship with the underlying elements in the document model. The appearance of the graphic instead reflects a parallel structure, the rendering tree, in which some elements are excluded and others are repeated.
~SVG名前空間に属する要素には、 文書の~graphicな成分を直には表現しないものも多くある。 それらは、代わりに［ ~graphicな効果／ ~metadata／ 他の要素を表現するために利用される内容／ 一定の条件の下に限り表示される代替 ］を定義する。 動的な文書においては、 ~graphicを成す ある種の成分には， 描画されるかどうかが対話や~animationに依存するものもある。 これらのうち，`描画されない要素$は、 `描画~tree$内には直に含まれない。 ◎ Many elements in the SVG namespace do not directly represent a component of the graphical document. Instead, they define graphical effects, metadata, content to be used to represent other elements, or alternatives to be displayed under certain conditions. In dynamic documents, certain components of the graphic may be rendered or not, depending on interaction or animation. These non-rendered elements are not directly included in the rendering tree.
~SVGは，~graphicな下位-成分の再利用を~supportするので、 複数~回にわたり描画される要素もある。 個々の描画における［ ~style ／ ~raster化する際の拡縮率や座標系変換 ］は、文脈に依存して異なり得る。 ◎ Because SVG supports the reuse of graphical sub-components, some elements are rendered multiple times. The individual renderings may have context-dependent styling and may be rasterized at different scales or transformations.
3.2.1. 各種~定義
- `描画~tree@ （ `rendering tree^en ）
- 描画~treeは、 `~SVG文書片$内で描画されている要素たちが成す集合を表現する。 それは、［ 文書~treeから`描画されない要素$は除外しつつ， `再利用される~graphic$用に追加的な素片を挿入する ］ことにより，生成される。 各~graphicは、 描画~tree順序で塗られ, 組成され、 `paint-order$p ~propに基づく並替ngの~subjectになる。 視覚的な塗りが無い要素でも，依然として描画~tree内に在り得ることに注意。 ◎ The rendering tree is the set of elements being rendered in an SVG document fragment. It is generated from the document tree by excluding non-rendered elements and inserting additional fragments for re-used graphics. Graphics are painted and composited in rendering-tree order, subject to re-ordering based on the paint-order property. Note that elements that have no visual paint may still be in the rendering tree.
- `描画される要素@ （ `rendered element^en ）
- 要素のうち，現在の文書~用の`描画~tree$内に それを直に表現する~nodeが在るもの。 特に、［ `~use要素の~shadow~tree$内の要素が成す描画される`~instance$ ］は含まれる一方で，［ 再利用される~graphicを定義する~sourceとして描画に影響しても，自身は直に描画されない要素 ］は含まれない。 `§ 描画される要素と描画されない要素＠#Rendered-vs-NonRendered$ を見よ。 ◎ An element that has a direct representation in the rendering tree for the current document. Includes a rendered instance of an element in a use-element shadow tree. Does not include elements that affect rendering as the source definition of re-used graphics but are not directly rendered themselves. See Rendered versus non-rendered elements
- `描画されない要素@ （ `non-rendered element^en ）
- 要素のうち，現在の文書~用の`描画~tree$内に それを直に表現する~nodeが無いもの。 そうであっても、［ 再利用される~graphic／~graphicな効果 ］として描画~treeに影響するものはある。 `§ 描画される要素と描画されない要素＠#Rendered-vs-NonRendered$ を見よ。 ◎ An element that does not have a direct representation in the rendering tree for the current document. It may nonetheless affect the rendering tree as re-used graphics or graphical effects. See Rendered versus non-rendered elements.
- `再利用される~graphic@ （ `re-used graphics^en ）
- 描画~tree内に含まれる~graphicな成分のうち，それを直に表現する等価な要素は ~DOM~tree内には無いもの。 それらには、~shadow~DOM要素を通して表現されるものや （ `use$e 要素で再利用される~graphicなど）, ~graphicな効果の一部を成すものとして生成される画像~片（~patternや~maskなど）がある。 ◎ Graphical components that are included in the rendering tree but do not have a single direct equivalent element in the document model. They may be represented through shadow DOM elements (as in graphics re-used with a ‘use’ element), or as image fragments generated as part of a graphical effect (as in patterns or masks).
- `決して描画されない要素@ （ `never-rendered element^en ）
- 要素のうち、 文脈や `display$p ~style値には関わらず， `決して直に描画されない^emもの。 次に挙げる要素~型が含まれる ⇒ `clipPath$e, `defs$e, `desc$e, `linearGradient$e, `marker$e, `mask$e, `metadata$e, `pattern$e, `radialGradient$e, `script$e, `style$e, `title$e, `~use要素の~shadow~tree$の`~instance根$ではない `symbol$e 要素 ◎ Any element type that is never directly rendered, regardless of context or display style value. It includes the following elements: ‘clipPath’, ‘defs’, ‘desc’, ‘linearGradient’, ‘marker’, ‘mask’, ‘metadata’, ‘pattern’, ‘radialGradient’, ‘script’, ‘style’ and ‘title’; it also includes a ‘symbol’ element that is not the instance root of a use-element shadow tree.
- `描画-可能な要素@ （ `renderable element^en ）
- 要素のうち、 `描画~tree$内に それを直に表現する［ ~graphic ／ 容器 ／ ~text ／ 音声 ／ ~animation ］~nodeが`在る^emもの。 次に挙げる要素~型が含まれる ⇒ `a$e, `circle$e, `ellipse$e, `foreignObject$e, `g$e, `image$e, `line$e, `path$e, `polygon$e, `polyline$e, `rect$e, `svg$e, `switch$e, `text$e, `textPath$e, `tspan$e, `use$e, `~use要素の~shadow~tree$の`~instance根$である `symbol$e 要素 ◎ Any element type that can have a direct representation in the rendering tree, as a graphic, container, text, audio, or animation. It includes the following elements: ‘a’, ‘circle’, ‘ellipse’, ‘foreignObject’, ‘g’, ‘image’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’, ‘svg’, ‘switch’, ‘text’, ‘textPath’, ‘tspan’ and ‘use’; it also includes a ‘symbol’ element that is the instance root of a use-element shadow tree.
- 描画-可能な要素は、［ 所与の文書／所与の時点 ］で描画されることもされないこともある。 ◎ A renderable element may or may not be rendered in a given document or point in time.
3.2.2. 描画される要素と描画されない要素
どの~SVG要素（または `~use要素の~shadow~tree$内の`要素~instance$）も、 所与の時点で描画されるかされないか どちらかになる。 要素が現在~描画されるかどうかは、 それの視覚的な表示のみならず，対話性や幾何-計算にも影響する。 ◎ At any given time, every SVG element (or element instance in a use-element shadow tree) is either rendered or non-rendered. Whether an element is currently rendered or not affects not only its visual display but also interactivity and geometric calculations.
次のいずれかに［ 該当する／該当する状況にある ］要素は、`描画されない^em： ◎ An element is not rendered in any of these five situations:
- `決して描画されない要素$ ◎ never-rendered element types
- ［ `条件付き処理~属性$／ `switch$e 構造 ］により除外されている ◎ elements excluded because of conditional processing attributes or ‘switch’ structures
- `display$p ~propの算出d値は `none^v になる ◎ elements with a computed style value of none for the display property
- ~DOM~treeに属していない ◎ detached from the DOM tree
- 他の描画されない要素の子孫である ◎ descendent elements of other non-rendered elements
描画されない要素は： ◎ Non-rendered elements:
- それを参照する別の要素の描画に利用されるときを除き、 ~graphicに対する視覚的な効果はない。 ◎ have no visual effect on the graphic, except when they are used in the rendering of another element that references them.
- ［ `clipPath$e ／ `mask$e ］の子孫であっても，［ `切抜き~path＠~MASKING1#clipping-path$ ／ `~mask＠~MASKING1#masking$ ］を成す結果の幾何には寄与しない。 ◎ do not contribute to the net geometry of clipping paths or masks when they are descendants of a ‘clipPath’ or ‘mask’
- `~pointer~event＠~SVGinteract#PointerEvents$【！~SVGinteract#UIEvents】に感応しない。 ◎ are not sensitive to pointer events
- `~focus＠~SVGinteract#Focus$を受取れない。 ◎ cannot receive focus
- `限界~boxの計算＠~SVGcoords#ObjectBoundingBox$に寄与しない。 ◎ do not contribute to bounding box calculations
- `~text~layout＠~SVGtext#TextLayout$を遂行するときには考慮されない。 ◎ are not considered when performing text layout
描画されない要素は、文書の［ 利用者から~access可能な~tree ］内には表現されない。 そうであっても要素は、 ~DOM~treeを成す一部であり続け， `~style継承と~cascade＠~SVGstyling$には関与する。 ◎ Non-rendered elements are not represented in the document accessibility tree. Nonetheless, they remain part of the document model, and participate in style inheritance and cascade.
3.2.3. 可視性の制御-法： `display^p, `visibility^p ~propの効果
~SVGは、［ `display^p, `visibility^p ］~propを利用して，通常は描画される要素の表示が可視になるかどうかを~toggleする。 これらの~propによる可視~効果は【！静的~文書においては】類似するが， 概念的には別個である。 ◎ SVG uses two properties to toggle the visible display of elements that are normally rendered: display and visibility. Although they have a similar visible effect in static documents, they are conceptually distinct.
【 ~SVGには， “~~排他的に~~配置する（ `lay out^en する）” 概念は — ~textを成す文字どうしを除けば — 無いので、 多くの場合，この 2 つの~propによる見かけ上の効果は判別できない。 】
注記： これらの~propの定義は `CSS2$r 仕様の `display＠~CSS2J#propdef-display$p, `visibility＠~CSSDISP#propdef-visibility$p を見よ。 ◎ See the CSS 2.1 specification for the definitions of display and visibility. [CSS2]
`display^p を `none^v に設定すると、 要素は描画されなくなる。 通常は描画される［ `~graphics要素$ ／ `~text内容~要素$ ／ `容器~要素$ ］上で `display^p を `none^v に設定した場合、 要素（および そのすべての子孫）は，`描画~tree$の一部を成さなくなる。 `display^p ~propは継承されないことに注意。 【 `visibility^p と違って，子孫で `display^p を上書きしても可視に戻せない。】 ◎ Setting display to none results in the element not being rendered. When applied to graphics elements, text content elements, and container elements that are normally rendered, setting display to none results in the element (and all its descendents) not becoming part of the rendering tree. Note that display is not an inherited property.
`display^p 値が `none^v 以外になる要素は、 通常通り描画される。 ◎ Elements that have any other display value than none are rendered as normal.
`display^p ~propが適用されるのは`描画-可能な要素$に限られる。 ［ `決して描画されない要素$／ 条件付き処理に基づいて`描画されない＠#Rendered-vs-NonRendered$要素 ］上で `display^p を `none^v に設定しても，効果は無い。 ◎ The display property only applies to renderable elements. Setting display: none on an element that is never directly rendered or not rendered based on conditional processing has no effect.
`display^p ~propは、 要素の直接的な処理には影響するが， 他の要素から参照されるのを妨げることはない。 例えば `path$e 要素~上で `display^p を `none^v に設定した場合、 要素を~canvas上に直に描画するのは妨げるが、 依然として `textPath$e 要素から参照でき， その幾何は ~pathに沿う~textの処理に利用されることになる。 ◎ The display property affects the direct processing of a given element, but it does not prevent it from being referenced by other elements. For example, setting display: none on a ‘path’ element will prevent that element from getting rendered directly onto the canvas, but the ‘path’ element can still be referenced by a ‘textPath’ element and its geometry will be used in text-on-a-path processing.
［ `~graphics要素$ ／ `use$e 要素 ］上で `visibility^p を［ `hidden^v または `collapse^v ］に設定すると，要素は塗られなくなる。 しかしながら，要素は依然として ⇒＃ `描画~tree$の一部を成す／ （ `pointer-events$p の値に依存して）~pointer~eventにも感応する ／ （ `tabindex$a 値に依存して）~focusを受取れる ／ 限界~boxの計算や切抜き~pathに寄与する ／ ~text~layoutに影響する ◎ When applied to a graphics element or ‘use’ element, setting visibility to hidden or collapse results in the element not being painted. It is, however, still part of the rendering tree. It may be sensitive to pointer events (depending on the value of pointer-events), may receive focus (depending on the value of ‘tabindex’), contributes to bounding box calculations and clipping paths, and does affect text layout.
`visibility^p ~propが直に影響するのは、［ `~graphics要素$ ／ `~text内容~要素$ ／`~text内容~要素$の子である `a$e 要素 ］の描画に限られる。 しかしながら， `visibility^p ~propは継承されるので、［ `use$e 要素や`容器~要素$ ］自体には効果は無くとも，その子孫~要素には影響し得る。 ◎ The visibility property only directly affects the rendering of graphics elements, text content elements, and the ‘a’ element when it is a child of text content element. Since visibility is an inherited property, however, although it has no effect on a ‘use’ element or container element itself, its inherited value can affect descendant elements.
3.2.4. 再利用される~graphic
文書（または別の文書~内）の ある部分が定義する~graphicな内容は、 他の要素を描画するために利用されることもある。 描画の観点からは、 再利用される~graphicは，次の 2 種に分けられる： ◎ Graphical content defined in one part of the document (or in another document) may be used to render other elements. There are two types of re-used graphics from a rendering perspective:
- ~shadow~DOM要素 — ［ `use$e 要素や，塗り~server間の域外参照 ］により生成されるものなど。 ◎ shadow DOM elements, such as those generated by ‘use’ elements or by cross-references between paint servers;
- 別の要素~上の~graphicな効果を成す一部として再利用される内容 — 次に挙げる要素の子~内容を含む ⇒＃ `~marker＠~SVGpainting#Markers$ ／ `塗り~server要素$ ／ `clipPath$e ／ `mask$e ◎ content re-used as part of a graphical effect on another element, including the child content of markers, paint server elements, ‘clipPath’, and ‘mask’.
~shadow~DOM要素たちは、 通常の要素と同じ仕方で描画される — それを~hostする要素（例： `use$e 要素）は、 容器~要素であって，当の~shadow内容は その子孫であったかのように。 ~shadow~DOM要素~上の~styleや幾何~propは、 ~source文書~内で それに`対応している要素$からは独立に解決される。 `display$p ~propは，~shadow要素に対しても通常通り効果を発揮するが、 `symbol$e 要素には特別な規則が適用される。 ◎ Shadow DOM elements are rendered in the same way as normal elements, as if the host element (e.g., the ‘use’ element) was a container and the shadow content was its descendents. Style and geometry properties on the shadow DOM elements are resolved independently from those on their corresponding element in the source document. The display property has its normal effect on shadow elements, except for special rules that apply to the ‘symbol’ element.
混色~目的においては、 `use$e 要素は，`隔離され$ない~groupを形成する。 ◎ For blending purposes, the ‘use’ element forms a non-isolated group.
対照的に，~graphicな効果を成す要素は、［ `積層~文脈$として, かつ`隔離され$る~groupとして独立に描画される ］ような，自己完結的な~SVG素片を生成する。 この素片~用の~canvasは、拡縮される【？】。 そのような要素の子~内容は、 この~canvasの中へ描画され, 組成される。 この平坦~化された~canvasは、 他の塗り層と［ 組成する／混色する ］ときには，一体の~vector画像として扱われる。 ◎ In contrast, graphical effects elements generate a self-contained SVG fragment which is rendered independently as a stacking context and an isolated group. The canvas for this fragment is scaled The graphical effect element's child content is rendered and composited into this canvas. The flattened canvas as a whole is treated as a vector image when compositing and blending with other paint layers
~graphicな効果を成す要素 %要素 の どの子~内容に対しても， `display$p ~propの効果は通常に発揮され、 `none^v に設定された場合，子~内容を成す下位treeは描画から除外される。 しかしながら，当の~graphicな効果は、 %要素 や %要素 の先祖~上で `display^p 値が `none^v にされても改められることはない。 ◎ The display property on any child content of a graphical effects element has its normal effect when set to none, excluding that subtree from being used in rendering. However, the graphical effect is not altered by a value of display: none on the graphical effect element or an ancestor.
3.3. 画家の~model
~SVGは、 “画家の~model” を描画に利用する。 `塗り$は、 出力~装置に対する~~順序付けられた一連の演算として適用される — 各~演算は、 出力~装置のある区画に，それまで そこに塗られたものを遮るように塗る。 各~objや~groupは、 塗られた後には，次回の塗ng演算の背景を成す一部になる。 ~SVG-2は、高度な混色~modeと組成~演算を~supportする — それは、各~塗ng演算が背景とどう相互作用するかを制御する。 これらの塗ng演算は、 `組成＆混色 仕様$に要旨される規則に従って統治される。 ◎ SVG uses a "painters model" of rendering. Paint is applied in successive operations to the output device such that each operation paints onto some area of the output device, possibly obscuring paint that has previously been layed down. After each object or group is painted, it becomes part of the background for the next painting operation. SVG 2 supports advanced blending modes and compositing operations that control how each painting operation interacts with the background. The rules governing these painting operations are outlined in the Compositing and Blending Specification.
3.4. 描画~順序
~SVG要素は、 `~SVG表示域$の x, y 軸に加えて， z 軸においても位置される。 z 軸~上の位置は、 要素たちが塗られる順序を定義する。 ◎ Elements in SVG are positioned in three dimensions. In addition to their position on the x and y axis of the SVG viewport, SVG elements are also positioned on the z axis. The position on the z-axis defines the order that they are painted.
要素たちは、 z 軸に沿って，いくつかの［ `積層~文脈@ と呼ばれる~group ］に分けられる。 ◎ Along the z axis, elements are grouped into stacking contexts.
【 この節における “要素” は、 暗黙的に，描画~treeにおける［ 要素／`要素~instance$ ］に対応する~nodeを指す（あるいは同一視されている）。 】
3.4.1. ~SVGにおける積層~文脈の確立-法
次のいずれかに該当する~SVG要素は、 その子孫~用に新たな積層~文脈を確立するモノトスル： ◎ A new stacking context must be established at an SVG element for its descendants if:
- 根~要素 ◎ it is the root element
- `foreignObject$e, `image$e, `marker$e, `mask$e, `pattern$e, `symbol$e, `use$e ◎ ↓the element is an outermost svg element, or＼ a ‘foreignObject’, ‘image’, ‘marker’, ‘mask’, ‘pattern’, ‘symbol’ or ‘use’ element
- `最外縁の~svg要素$ ／ 他の `svg$e 要素のうち，その `overflow$p ~propの算出d値は `visible^v でないもの ◎ the element is an inner ‘svg’ element and the computed value of its overflow property is a value other than visible
-
明示的な切抜きの~subjectである要素： ◎ the element is subject to explicit clipping:
- `clip$p ~propの適用-対象であって，その算出d値は `auto^v でない ◎ the clip property applies to the element and it has a computed value other than auto
- `clip-path$p ~propの適用-対象であって，その算出d値は `none^v でない ◎ the clip-path property applies to the element and it has a computed value other than none
- `opacity$p ~propの適用-対象であって，その算出d値は `1^v でない ◎ the opacity property applies to the element and it has a computed value other than 1
- `mask$p ~propの適用-対象であって，その算出d値は `none^v でない ◎ the mask property applies to the element and it has a computed value other than none
- `filter$p ~propの適用-対象であって，その算出d値は `none^v でない ◎ the filter property applies to the element and it has a computed value other than none
- 別の仕様にて定義される~propの適用-対象であって、 その~propは，~SVGにおいて積層~文脈を確立するものと定義されている。 ◎ a property defined in another specification is applied and that property is defined to establish a stacking context in SVG
積層~文脈は、順序 【塗りと各種~効果を~group化する順序】 を述べるために利用される概念的な道具である。 文書が描画されるとき、 要素たちは，その順序に従って塗るモノトスル。 また，~pointer~eventの~targetを決定するときには、 どの要素が【 z-軸において】最も高いかを決定する。 積層~文脈は、 要素の~DOM~treeにおける位置には影響しない。 積層~文脈の有無が、 ~canvasを成す X-Y 平面における要素の［ 位置, ~size, 方位 ］に影響することはない。 【！要素たちが塗られる順序に限られ，】 ◎ Stacking contexts are conceptual tools used to describe the order in which elements must be painted one on top of the other when the document is rendered, and for determining which element is highest when determining the target of a pointer event. Stacking contexts do not affect the position of elements in the DOM tree, and their presence or absence does not affect an element's position, size or orientation in the canvas' X-Y plane - only the order in which it is painted.
積層~文脈 %親 は、 他の積層~文脈 %子 を包含し得る。 %子 は、 %親 の~~視点からは不可分である — %親 に属する要素が、 %子 に属する要素たちの合間に挟まれることはない。 【したがって、再帰的に，先祖~積層~文脈に属する要素についても同様になる。】 ◎ Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; elements in ancestor stacking contexts may not come between any of its elements.
どの要素も、ある 1 つの積層~文脈に属する。 【すなわち、［ 要素の先祖のうち，積層~文脈を確立するもののうち，要素に最も近い先祖 ］が確立したそれ。】 同じ積層~文脈に属する要素たちは、 文書~順序に則って積層されるモノトスル。 ◎ Each element belongs to one stacking context. Elements in a stacking context must be stacked according to document order.
`foreignObject$e 要素は例外として、 ~SVG要素により作成される積層~文脈~用の 奥から手前にかけての積層~順序は： ◎ With the exception of the ‘foreignObject’ element, the back to front stacking order for a stacking context created by an SVG element is:
- 積層~文脈を形成している要素に背景／~borderがあれば それら ◎ the background and borders of the element forming the stacking context, if any
- ~tree順序による子孫 ◎ descendants, in tree order
`foreignObject$e 要素は、 ~CSS用語でいう “絶対的に位置された†包含塊” を作成するので， そのような要素が作成する積層~文脈における積層~順序~用の規範的な規則は `CSS2$r `付録 E＠~CSS22/zindex.html#elaborate-stacking-contexts$ にて与えられる。 【† 原文は “`fixed position^en （固定d位置（~scrollされても動かない））” と記されているが誤用であろう。】 ◎ Since the ‘foreignObject’ element creates a "fixed position containing block" in CSS terms, the normative rules for the stacking order of the stacking context created by ‘foreignObject’ elements are the rules in Appendix E of CSS 2.1.
3.5. 要素はどう描画されるか
個々の`~graphics要素$は、 `隔離され$ない~groupであって，それを成す各~成分（~fill, ~stroke, 等々） （`§ 図形と~textの塗ng＠#PaintingShapesAndText$を見よ）は、 その~groupを成す~memberであったかのように扱われる。 `§ ~groupはどう描画されるか＠#Grouping$ を見よ。 ◎ Individual graphics elements are treated as if they are a non-isolated group, the components (fill, stroke, etc) that make up a graphic element (See Painting shapes and text) being members of that group. See How groups are rendered.
3.6. ~groupはどう描画されるか
`g$e 要素などの~group化する要素（`容器~要素$を見よ）は、 `組成~group$を作成する。 同様に `use$e 要素も、 その~shadow内容~用に組成~groupを作成する。 `組成＆混色 仕様$が`組成~group$を描画する方法を規範的に述べる。 ~SVGにおいては、 ~groupには効果 — 例えば［ 不透明度, ~filter, ~masking ］など — が適用され得る。 ~groupを描画した結果には，先ず これらの効果が適用され、 それから変形が（もしあれば）適用され，最後に，~groupは`~group後景$と混色-＆組成される。 そのような効果を~groupに適用することは、 その~groupを隔離させる。 したがって，`組成~group$の描画は、 次の手続きに従う： ◎ Grouping elements, such as the ‘g’ element (see container elements ) create a compositing group. Similarly, a ‘use’ element creates a compositing group for its shadow content. The Compositing and Blending specification normatively describes how to render compositing groups. In SVG, effects may be applied to a group. For example, opacity, filters or masking. These effects are applied to the rendered result of the group immediately before any transforms on the group are applied, which are applied immediately before the group is blended and composited with the group backdrop. Applying any such effects to a group makes that group isolated. Thus, rendering a compositing group follows the following steps:
~groupは隔離される場合： ◎ If the group is isolated:
- `初期~後景$に新たな~bufferあてがった上で，透明な黒に初期化する ◎ The initial backdrop is set to a new buffer initialised with rgba(0,0,0,0)
- `初期~後景$上に~groupを成す内容のうち［ `~graphics要素$ ／ `g$e 要素 ］を`順に描画する＠#RenderingOrder$ ◎ The contents of the group that are graphics elements or ‘g’ elements are rendered in order, onto the initial backdrop
-
~filterや他の効果を適用して~group~canvasを改変する ◎ filters and other effects that modify the group canvas are applied
注記： 高~品質な描画を供するため、 原始filterその他の~bitmap効果は， `演算-時の座標~空間＠~FILTERS#operating-coordinate-space$内で適用するモノトスル。 ◎ To provide for high quality rendering, filter primitives and other bitmap effects must be applied in the operating coordinate space.
- ~group変形を適用する ◎ Group transforms are applied
- ~group~canvasを`~group後景$に混色-＆組成する ◎ The group canvas is blended and composited with the group backdrop
~groupは隔離されない場合： ◎ else (the group is not isolated):
- `初期~後景$には、`~group後景$をあてがう ◎ The initial backdrop is set to the group backdrop
- `初期~後景$上に，~groupを成す内容のうち［ `~graphics要素$ ／ `g$e 要素 ］を`順に描画する＠#RenderingOrder$ — ~group変形は、要素ごとに 要素を描画するに伴い適用する。 ◎ The contents of the group that are graphics elements or ‘g’ elements are rendered in order, onto the initial backdrop. The group transforms are applied to each element as they are rendered.
3.6.1. ~obj不透明度と~group不透明度： `opacity^p ~propの効果
注記： `opacity＠~CSSWG/css-color-3#opacity$p の定義は、 `css-color-3$r を見よ。 ◎ See the CSS Color Module Level 3 for the definition of opacity. [css-color-3]
【 この `opacity^p は、 `css-color-4^r の `opacity＠~CSSCOLOR#propdef-opacity$p と違って， `percentage$t 値は受容しない。 `opacity^p と同じ範囲の値をとるものと定義された~propも同様になる。 それらの~propには `percentage^t 用の挙動も述べられているが、 実装されていないため，どちらの定義に従うかは意図的に先送りされている （`403$issue）。 】
`opacity$p ~propは、所与の［ ~graphicな要素／容器~要素 ］が~canvasに塗られるときに，どれだけ不透明になるかを指定する。 これは、 容器~要素に適用されるときは `~group不透明度^emと称され， 個々の描画~要素に適用されるときは `~obj不透明度^emと称される。 しかしながら，これらの 2 つの演算~用の原則は同じである。 ◎ The opacity property specifies how opaque a given graphical element or container element will be when it is painted to the canvas. When applied to a container element, this is known as group opacity, and when applied to an individual rendering element, it is known as object opacity. The principle for these two operations however is the same.
~SVGには、他にも不透明度に関係する~propがいくつかある ⇒＃ `fill-opacity$p は ~fill時の演算の不透明度を指定する／ `stroke-opacity$p は ~stroke時の演算の不透明度を指定する／ `stop-opacity$p は ~gradient用の色停の不透明度を指定する ◎ There are several other opacity-related properties in SVG: • fill-opacity, which specifies the opacity of a fill operation; • stroke-opacity, which specifies the opacity of a stroking operation; and • stop-opacity, which specifies the opacity of a gradient stop.
これらの 4 種の不透明度~propは、 中間~描画~演算~内に孕まれる。 しかしながら，［ ~obj不透明度／~group不透明度 ］は、後処理~演算と捉えられる。 概念的には、 `opacity$p が適用された［ ~obj／~group ］は、~RGBA中間~画像の中に描画された上で，一体として~canvasの中に混色される — 指定された `opacity$p 値を中間~画像~全体にわたり一様に利用して。 したがって, `opacity$p が在るとき【算出d値が `1^v でないとき】は~groupを`隔離-$させる。 ◎ These four opacity properties are involved in intermediate rendering operations. Object and group opacity however can be thought of as a post-processing operation. Conceptually, the object or group to which opacity applies is rendered into an RGBA offscreen image. The offscreen image as whole is then blended into the canvas with the specified opacity value used uniformly across the offscreen image. Thus, the presence of opacity causes the group to be isolated.
`opacity$p ~propは、 次に挙げる~SVG要素に適用される ⇒ `svg$e, `g$e, `symbol$e, `marker$e, `a$e, `switch$e, `use$e, `~graphics要素$ ◎ The opacity property applies to the following SVG elements: ‘svg’, ‘g’, ‘symbol’, ‘marker’, ‘a’, ‘switch’, ‘use’ and graphics elements.
次の例に［ ~obj／~group ］に対する `opacity$p ~propの様々な用法を示す： ◎ The following example illustrates various usage of the opacity property on objects and groups.
<svg xmlns="http://www.w3.org/2000/svg"
width="600" height="175" viewBox="0 0 1200 350">
<!--
~blue背景を与える矩形
◎
Background blue rectangle
-->
<rect x="100" y="100" width="1000" height="150" fill="blue"/>
<!--
いくつかの~red真円
— 不透明なものから透明に近いものまで
◎
Red circles going from opaque to nearly transparent
-->
<circle cx="200" cy="100" r="50" fill="red" opacity="1"/>
<circle cx="400" cy="100" r="50" fill="red" opacity=".8"/>
<circle cx="600" cy="100" r="50" fill="red" opacity=".6"/>
<circle cx="800" cy="100" r="50" fill="red" opacity=".4"/>
<circle cx="1000" cy="100" r="50" fill="red" opacity=".2"/>
<!--
不透明な~group内にある 2 個の真円：
不透明な~redの上に不透明な~green
◎
Opaque group, opaque circles
-->
<g opacity="1">
<circle cx="182.5" cy="250" r="50" fill="red" opacity="1"/>
<circle cx="217.5" cy="250" r="50" fill="green" opacity="1"/>
</g>
<!--
半透明な（不透明度 .5 — 以下同様）~group内にある 2 個の真円：
不透明な~redの上に不透明な~green
◎
Group opacity: .5, opacity circles
-->
<g opacity=".5">
<circle cx="382.5" cy="250" r="50" fill="red" opacity="1"/>
<circle cx="417.5" cy="250" r="50" fill="green" opacity="1"/>
</g>
<!--
不透明な~group内にある 2 個の真円：
不透明な~redの上に半透明な~green
◎
Opaque group, semi-transparent green over red
-->
<g opacity="1">
<circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"/>
<circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"/>
</g>
<!--
不透明な~group内にある 2 個の真円：
半透明な~greenの上に半透明な~red
◎
Opaque group, semi-transparent red over green
-->
<g opacity="1">
<circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"/>
<circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"/>
</g>
<!--
半透明な~group内にある 2 個の真円：
半透明な~redの上に半透明な~green真円
◎
Group opacity .5, semi-transparent green over red
-->
<g opacity=".5">
<circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"/>
<circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"/>
</g>
</svg>
いくつかの真円~groupが背景の中へ混色される様子 ◎ Image showing different groups of circles blended into the background.
この例にて、 上段に示される 5 個の真円には， 順に 1.0 から 0.2 までの相異なる不透明度があてがわれている。 下段には 5 個の `g$e 要素が示され、 それぞれ，次のような重合している~red, ~greenにされた真円を包含する： ◎ In the example, the top row of circles have differing opacities, ranging from 1.0 to 0.2. The bottom row illustrates five ‘g’ elements, each of which contains overlapping red and green circles, as follows:
- 1 個目の~groupは、 基準を与える不透明な事例を示す。 ~groupも真円たちも 不透明度は 1 にされている。 ◎ The first group shows the opaque case for reference. The group has opacity of 1, as do the circles.
- 2 個目の~groupは、 ~group内の要素が不透明なときの~group不透明度を示す。 ◎ The second group shows group opacity when the elements in the group are opaque.
- 3 個目と 4 個目の~group（ともに不透明度は 1 にされている）は、 不透明度が可換でないことを示す。 3 個目の~groupでは、 半透明~green真円が，半透明な~red真円の上に描かれている。 一方， 4 個目の~groupでは、 半透明な~red真円が，半透明な~green真円の上に描かれている。 この 2 つの真円が交差する区画は，相異なる色を表示することに注意。 この交差~区画では、 3 個目の~groupは ~green寄りの色を示す一方で， 4 個目の~groupは ~red寄りの色を示す。 ◎ The third and fourth group show that opacity is not commutative. In the third group (which has opacity of 1), a semi-transparent green circle is drawn on top of a semi-transparent red circle, whereas in the fourth group a semi-transparent red circle is drawn on top of a semi-transparent green circle. Note that area where the two circles intersect display different colors. The third group shows more green color in the intersection area, whereas the fourth group shows more red color.
- 5 個目の~groupは、 各 不透明度~設定による相乗的な効果を示す。 真円と~group自身の不透明度は、 ともに .5 に設定されている。 その結果，~red真円のみが占める（~green真円と重合しない）部位は、 ~blue矩形の中へ累積的な不透明度 .25 （すなわち， .5 ~MUL .5 ）で混色される。 その結果は，~red 25% , ~blue 75% が混色された色になる。 ◎ The fifth group shows the multiplicative effect of opacity settings. Both the circles and the group itself have opacity settings of .5. The result is that the portion of the red circle which does not overlap with the green circle (i.e., the top/right of the red circle) will blend into the blue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, after blending into the blue rectangle, results in a blended color which is 25% red and 75% blue.
3.7. ~graphics要素の種別
~SVGは、~canvas上に描画できる`~graphics要素$として，次に挙げる 3 個の基礎的な種別を~supportする： ◎ SVG supports three fundamental types of graphics elements that can be rendered onto the canvas:
- `図形$ — 直線や曲線が成す 何らかの組合nを表現する。 ◎ Shapes, which represent some combination of straight line and curves
- ~text — 文字~glyphたちが成す 何らかの組合nを表現する。 ◎ Text, which represents some combination of character glyphs
- ~raster画像 — ［ 矩形を成す格子~上の一連の点を塗る色と不透明度（~alphaともよく称される） ］を指定する値の配列を表現する。 （~SVGにおいては、`適合性~要件$に指定される形式による~raster画像~用の~supportが要求される）。 ◎ Raster images, which represent an array of values that specify the paint color and opacity (often termed alpha) at a series of points on a rectangular grid. (SVG requires support for specified raster image formats under conformance requirements.)
3.7.1. 図形と~textの塗ng
図形や~textは、 `~fill$できる（すなわち，図形の内域に塗りを適用する）／ `~stroke$できる（すなわち，図形の外形線に沿って塗りを適用する）。 ◎ Shapes and text can be filled (i.e., apply paint to the interior of the shape) and stroked (i.e., apply paint along the outline of the shape).
ある種の図形に対しては、 `~marker~symbol＠~SVGpainting#Markers$を，図形の境界に沿う位置に描ける。 各~marker~symbol（それ自身も［ 図形, ~text, 画像 ］からなる任意の組合nになり得る）は、 その~graphicな内容が，~SVG文書~treeの中で［ 所与の~marker~symbolを利用している図形~obj ］の直後に展開されていたかのように塗られる。 ~marker~symbolを成す~graphicな内容は、 ~graphics要素と同じ手法を利用して描画される。 ~marker~symbolは、~textには適用-可能でない。 ◎ For certain types of shapes, marker symbols (which themselves can consist of any combination of shapes, text and images) can be drawn at positions along the shape boundary. Each marker symbol is painted as if its graphical content were expanded into the SVG document tree just after the shape object which is using the given marker symbol. The graphical contents of a marker symbol are rendered using the same methods as graphics elements. Marker symbols are not applicable to text.
［ ~fill, ~stroke, ~marker ］が塗られる順序は、 `paint-order$p ~propにより決定される。 既定では、 ~fill, ~stroke, ~marker~symbolの順に塗られる。 各~marker~symbolは、 図形の外形線に沿って，図形の始端から終端にかけて順に描画される。 ◎ The order in which fill, stroke and markers are painted is determined by the paint-order property. The default is that fill is painted first, then the stroke, and then the marker symbols. The marker symbols are rendered in order along the outline of the shape, from the start of the shape to the end of the shape.
［ ~fill, ~stroke ］演算は、互いにまったく独立である。 一例として、［ ~fill, ~stroke ］演算には，それぞれに自前の不透明度~設定がある。 ◎ The fill and stroke operations are entirely independent; for instance, each fill or stroke operation has its own opacity setting.
~SVGは、［ ~fill／~stroke ］演算に利用できる塗りとして，数々の型の組込みの塗りを~supportする。 これらは、 `§ 塗り~server＠~SVGpservers$にて述べられる。 ◎ SVG supports numerous built-in types of paint which can be used in fill and stroke operations. These are described in Paint Servers.
3.7.2. ~raster画像の塗ng
~raster画像が描画されるとき、 元の標本は［ 出力~装置~上の要求される位置に標本を生産する，標準な~algo ］を利用して “標本化し直される” 。 標本化し直すときの要件は、 `適合性~要件$にて論じられる。 ◎ When a raster image is rendered, the original samples are "resampled" using standard algorithms to produce samples at the positions required on the output device. Resampling requirements are discussed under conformance requirements.
~UAには、［ ~animate化された画像を示している `img^e 要素~用に~animationを開始し直す ］ときは， `HTML$r のときと同じように`~animationを開始し直す$ものと期待される。 ◎ As in HTML [HTML, 10.4.2], all animated images with the same absolute URL and the same image data are expected to be rendered synchronised to the same timeline as a group, with the timeline starting at the time of the least recent addition to the group. ◎ When a user agent is to restart the animation for an img element showing an animated image, all animated images with the same absolute URL and the same image data in that img element's node document are expected to restart their animation from the beginning.
3.8. 塗られた領域の~filter法
~SVGにおいては、 どの塗ng演算も~filterできる。 （`~filter効果~仕様＠~FILTERS$を見よ。） ◎ SVG allows any painting operation to be filtered. (See Filter Effects.)
この事例における結果は、 当の塗り演算が［ `~filter効果~仕様＠~FILTERS$の規則で決定される~sizeの， 透明な黒に初期化された中間~canvas ］に適用されてから，［ `~filter効果~仕様＠~FILTERS$に定義される処理nにより~filterされた ］かのようになるモノトスル。 ◎ In this case the result must be as though the paint operations had been applied to an intermediate canvas initialized to transparent black, of a size determined by the rules given in Filter Effects then filtered by the processes defined in Filter Effects.
3.9. 切抜きと~masking
~SVGは、次の［ 切抜き／~masking ］特能を~supportする: ◎ SVG supports the following clipping/masking features:
- 切抜き~pathは、［［ `path$e, `text$e, `基本~図形$ ］からなる任意の組合n, または 基本~図形 ］を利用して， 1-bit ~maskを成す外形線を与える 【！ `anti-aliasing^en は別として】 — そこでは、 それが成す外形線の “内側にある” すべては~~透過することが許容される一方で， 外側にあるすべては~maskされ見えなくなる。 【 1-bit ~maskとは、外側の~mask値は 0, 内側の~mask値は 1 にされた~maskに等価になることを意味する。】 ◎ clipping paths, which either uses any combination of ‘path’, ‘text’ and basic shapes or basic shapes to serve as the outline of a (in the absence of anti-aliasing) 1-bit mask, where everything on the "inside" of the outline is allowed to show through but everything on the outside is masked out
- ~maskは、`容器~要素$であり，`~graphics要素$や他の容器~要素を包含できる。 それは、［ 前景~objたちを現在の背景の中へ組成するときに，半透明~maskとして利用される~graphic ］の集合を定義する。 ◎ masks, which are container elements which can contain graphics elements or other container elements which define a set of graphics that is to be used as a semi-transparent mask for compositing foreground objects into the current background.
切抜き, ~maskingの両者とも `css-masking-1$r ~moduleにて指定される。 ◎ Both, clipping and masking, are specified in the module CSS Masking [css-masking-1].
3.10. 親への組成
~SVG文書片は、半不透明にもなり得る。 ◎ SVG document fragments can be semi-opaque.
`svg$e 要素は、 `組成＆混色 仕様$に則って，常に`隔離され$る~groupを作成する。 ~SVG文書は~top-level文書であるとき — すなわち，別の文書~内に埋込まれていないとき — その根 `svg$e 要素は`~page~group$と見なされ， 不透明度 100% の白にされた後景に組成される。 他のすべての事例では、 ~SVG［ 文書／文書片 ］は，不透明度を保全しつつ親~文書の中へ組成される。 ◎ In accordance with the Compositing and Blending specification, the ‘svg’ element always creates an isolated group. When an SVG document is a top-level document, meaning it is not embedded in another document, the root ‘svg’ element is considered to be the page group and is composited with a backdrop of white with 100% opacity. In all other cases, the SVG document or document fragment is composited into the parent document with opacity preserved.
3.11. `overflow^p ~propの効果
注記： `overflow$p の定義は `CSS2$r 仕様を見よ。 ◎ See the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification [CSS2] for the definition of overflow.
| 要素 | 初期~値 | ~UA~stylesheet | `auto^v | `visible^v | `hidden^v | `scroll^v |
|---|---|---|---|---|---|---|
| 文書の根 `svg^e | `visible^v | n/a | `visible^v | `scroll^v | `visible^v | `hidden^v | `scroll^v |
| 他の `svg^e | `visible^v | `hidden^v | `visible^v | `scroll^v | `visible^v | `hidden^v | `scroll^v |
| `text^e | `visible^v | `hidden^v | `visible^v | `visible^v | `hidden^v | `hidden^v |
| `pattern^e | `visible^v | `hidden^v | `visible^v | `visible^v | `hidden^v | `hidden^v |
| `marker^e | `visible^v | `hidden^v | `visible^v | `visible^v | `hidden^v | `hidden^v |
| `symbol^e | `visible^v | `hidden^v | `visible^v | `visible^v | `hidden^v | `hidden^v |
| `image^e | `visible^v | `hidden^v | `visible^v | `visible^v | `hidden^v | `hidden^v |
| `foreignObject^e | `visible^v | `hidden^v | `visible^v | `scroll^v | `visible^v | `hidden^v | `scroll^v |
`overflow$p ~propがとり得る値とその意味は、 `CSS2$r の `overflow＠~CSS22/visufx.html#overflow-property$p ~propに定義されるそれと同じである†。 しかしながら，次も追加的に適用される： ◎ The overflow property has the same parameter values and has the same meaning as defined in CSS 2.1 ([CSS2], section 11.1.1); however, the following additional points apply:
【† 現在の~CSSによる `overflow＠~CSSOVERFLOW3#propdef-overflow$p には、 他にもとり得る値がある（例： `clip^v ）。 そのような値が指定された場合， 無効と見なされ無視されることになるが、 上の表tに与えたような対応付けが定義されるかもしれない。 】
- `overflow$p ~propの値が `visible^v の場合、 ~propによる効果は無い （すなわち，切抜き矩形は作成されない）。 ◎ If the overflow property has a value of 'visible', the property has no effect (i.e., a clipping rectangle is not created).
- `overflow$p ~propを適用できる要素に対しては、 その値が［ `hidden^v ／ `scroll^v ］の場合， ~SVG表示域と正確に同じ~size【および位置】の切抜き矩形が適用される。 ◎ For those elements to which the overflow property can apply. If the overflow property has the value hidden or scroll, a clip, the exact size of the SVG viewport is applied.
- `svg$e 要素~上で `scroll^v が指定されていて，~UAは ~screen上で可視な~scroll用の仕組み（ `scroll bar^en や `panner^en など）を利用する場合、 その仕組みは，~SVG表示域~用に表示されるべきである — 要素の内容が切取られるかにかかわらず。 ◎ When scroll is specified on an ‘svg’ element and if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for the SVG viewport whether or not any of its content is clipped.
-
~SVG内容の中では、値 `auto^v は：
- 子~要素~用に描画される すべての内容は、［ ~scroll用の仕組みを通すか，切抜くことなく描画する ］ことにより，可視にするモノトスルことを含意する。
- 次に該当する要素に対しては、 `scroll^v として扱ってもヨイ ⇒ 値 `scroll^v は~UAに~scroll用の仕組みを利用させる結果になる
- 次のいずれかに該当する場合、 `visible^v として扱うモノトスル ⇒＃ ~UAは~scroll用の仕組みを備えていない ／ 要素の内容は切抜かれないことになる ／ 要素~上の値 `scroll^v は `hidden^v として扱われる
注記： `overflow$p は — その初期~値は `auto^v であるが — ~UA~stylesheet内では、 次に該当する要素~上では `hidden^v に上書きされる ⇒＃ 自立的~文書の根~要素でない `svg$e 要素 ／ `pattern$e 要素 ／ `marker$e 要素 ◎ Although the initial value for overflow is auto. In the User Agent style sheet, overflow is overriden for the ‘svg’ element when it is not the root element of a stand-alone document, the ‘pattern’ element, and the ‘marker’ element to be hidden by default.