8. 座標系, 変換, 単位 — Coordinate Systems, Transformations and Units

8.1. 序論

すべての~SVG内容は、 `~SVG表示域@ ( `SVG viewport^en )の内側に描かれる。 どの~SVG表示域も、 ~size(横幅, 縦幅), 原点で特徴付けられ,抽象的な `利用元~単位@ ( `user unit^en )で計測される描画域を定義する。 ◎ All SVG content is drawn inside SVG viewports. Every SVG viewport defines a drawing region characterized by a size (width, height), and an origin, measured in abstract user units.

注記: 用語`~SVG表示域$は、~CSSに利用される用語 “表示域” とは別物であることに注意。 ◎ Note that the term SVG viewport is distinct from the "viewport" term used in CSS.

`初期~表示域@ ( `initial viewport^en )は、~top-levelの`~SVG表示域$であり,包含している環境が利用している座標系(例えば, ~web~browserにおいては~CSS `px^u )と`利用元~単位$との間に対応付けを確立する。 その確立-法の詳細は、 §初期~表示域にてに述べる。 ◎ The initial viewport is a top-level SVG viewport that establishes a mapping between the coordinate system used by the containing environment (for example, CSS pixels in web browsers) and user units. Establishing an initial viewport is described in more detail in The initial viewport.

`~SVG表示域$を確立するものは、要素に限られる。 どの要素が表示域を生成するかについての情報は、`新たな~SVG表示域の確立-法$secを見よ。 ◎ SVG viewports are only established by elements. See Establishing a new SVG viewport for information on which elements generate viewports.

各 `~SVG表示域$は、 `表示域~座標系@, `利用元~座標系@ を生成する — これらは、初期~時には一致する。 利用元~座標系は、 `css-transforms-1$r にて 定義される。 表示域を確立している要素が `viewBox$a が供している場合、利用元~座標系は,表示域~座標系に相対的に変形される — `viewBox$a 属性を見よ。 要素の子孫は — 例えば `transform$p ~propを指定することにより — `利用元~座標系$を更に改変できる。 ◎ Each SVG viewport generates a viewport coordinate system and a user coordinate system, initially identical. Providing a ‘viewBox’ on a viewport's element transforms the user coordinate system relative to the viewport coordinate system as described in The ‘viewBox’ attribute. Child elements of a viewport can further modify the user coordinate system, for example by specifying the transform property.

`~SVG表示域$は、入子にできる。 百分率~単位は、[ 表示域を定義する先祖の要素のうち,最も近いものの`利用元~座標系$ ]を基準に解決される — `単位$secにて定義されるように。 よって,~SVG表示域を入子にすることは、[ 百分率~単位の意味を定義し直す機会 / ~graphicを特定0の矩形な区画に相対的に “収める” ための新たな基準~矩形 ]を供する。 `最も遠い先祖の~SVG表示域@ とは、`最外縁の~svg要素$の`~SVG表示域$である。 先祖~SVG表示域は、~DOM~tree順序に依存することもある【?】。 例:[ `linearGradient$e, `radialGradient$e, `pattern$e, `mask$e, `clipPath$e `symbol$e, `use$e ]要素に対するときなど。 ◎ SVG viewports can be nested. Percentage units are resolved with reference to the user coordinate system of the nearest ancestral viewport-defining element, as defined in the section on Units. Hence, nesting SVG viewports provides an opportunity to redefine the meaning of percentage units and provide a new reference rectangle for "fitting" a graphic relative to a particular rectangular area. The furthest ancestral SVG viewport is the top most root SVG viewport with out leaving the SVG context. An ancestor SVG viewport might not be independent of the DOM tree order. E.g for ‘linearGradient’, ‘radialGradient’, ‘pattern’, ‘mask’, ‘clipPath’ ‘symbol’ or ‘use’ elements.

`~SVG表示域$の[ 横幅, 縦幅, 原点 ]は、[ ~SVG表示域を生成している~SVG文書片と,その素片の親 ]との間の(場合によっては暗黙的な)折衝処理により確立される。 この折衝処理については、`新たな~SVG表示域の確立-法$secを見よ。 ◎ The width, height and origin of SVG viewports is established by a negotiation process between the SVG document fragment generating the SVG viewport, and the parent of that fragment (whether real or implicit). See Establishing a new SVG viewport for a description of this negotiation process.

既定では、入子にされた`~SVG表示域$の`表示域~座標系$は、[ それを確立した要素 %要素 の親の利用元~座標系を %要素 の原点【?】で並進したもの ]に等価になる。 しかしながら, %要素 上の `transform$p ~propは、`表示域~座標系$を親の利用元~座標系に相対的に改変することになる。 ◎ By default, a nested SVG viewport's viewport coordinate system is equivalent to the local coordinate system of the parent element, translated by the origin of the SVG viewport's element. However, a transform property on an SVG viewport's element will modify the viewport coordinate system relative to the parent element's user coordinate system.

抽象的には、すべての`~SVG表示域$は,[ `~canvas@ と呼ばれる,【同じ一つの?】無限に広い描画域 ]に埋込まれる。 ◎ Abstractly, all SVG viewports are embedded in the canvas, a drawing region that is infinitely large in all relevant dimensions.

8.2. ~SVG表示域に等価な変形の算出-法

以下に与える処理-は、所与の要素の[ `viewBox$a 属性の値, 位置と~size, `preserveAspectRatio$a 属性の値 ]を[ 要素に包含されている内容に適用される,並進と拡縮率 ]へ変換する: ◎ This process converts the min-x, min-y, width and height values of a viewBox attribute, the position and size of the element on which the viewBox attribute is defined, and the value of the preserveAspectRatio attribute on that element into a translation and a scale that is applied to content contained by the element.

【 `viewBox^a 属性の値が妥当でない場合、指定されなかったかのようになる(初期~値)ので,この手続きも適用されない( `preserveAspectRatio^a 属性も無視される)。 】

  1. ( %vb-x, %vb-y, %vb-横幅, %vb-横幅 ) ~LET 順に, `viewBox^a 属性の ( `min-x^t, `min-y^t, `width^t, `height^t ) ◎ Let vb-x, vb-y, vb-width, vb-height be the min-x, min-y, width and height values of the viewBox attribute respectively.
  2. ( %e-x, %e-y ) ~LET 要素の位置 ◎ ↓
  3. ( %e-横幅, %e-縦幅 ) ~LET 要素の~size ◎ Let e-x, e-y, e-width, e-height be the position and size of the element respectively.
  4. %align ~LET [ 要素は `preserveAspectRatio$a 属性を有するならば その `align$t 値 / ~ELSE_ `xMidYMid^v ] ◎ Let align be the align value of preserveAspectRatio, or 'xMidYMid' if preserveAspectRatio is not defined.
  5. %meetOrSlice ~LET [ 次が満たされるならば `slice^v / ~ELSE_ `meet^v ] ⇒ 要素は `preserveAspectRatio$a 属性を有していて,その値に `meetOrSlice$t 値として `slice^v が供されている ◎ Let meetOrSlice be the meetOrSlice value of preserveAspectRatio, or 'meet' if preserveAspectRatio is not defined or if meetOrSlice is missing from this value.
  6. %scale-x ~SET %e-横幅 ~DIV %vb-横幅 ◎ Initialize scale-x to e-width/vb-width.
  7. %scale-y ~SET %e-縦幅 ~DIV %vb-縦幅 ◎ Initialize scale-y to e-height/vb-height.
  8. ~IF[ %align ~NEQ `none^v ]: ◎ ↓

    1. %scale-x ~SET %meetOrSlice に応じて ⇒# `meet^v ならば `min^op( %scale-x, %scale-y ) / `slice^v ならば `max^op( %scale-x, %scale-y ) ◎ If align is not 'none' and meetOrSlice is 'meet', set the larger of scale-x and scale-y to the smaller. ◎ Otherwise, if align is not 'none' and meetOrSlice is 'slice', set the smaller of scale-x and scale-y to the larger.
    2. %scale-y ~SET %scale-x ◎ ↑
  9. %translate-x ~LET %e-x ~MINUS ( %vb-x ~MUL %scale-x ) ◎ Initialize translate-x to e-x - (vb-x * scale-x).
  10. %translate-y ~LET %e-y ~MINUS ( %vb-y ~MUL %scale-y ) ◎ Initialize translate-y to e-y - (vb-y * scale-y)
  11. ~IF[ %align ~IN { `xMidYMin^v, `xMidYMid^v, `xMidYMax^v } ] ⇒ %translate-x ~INCBY ( %e-横幅 ~MINUS %vb-横幅 ~MUL %scale-x ) ~DIV 2 ◎ If align contains 'xMid', add (e-width - vb-width * scale-x) / 2 to translate-x.
  12. ~IF[ %align ~IN { `xMaxYMin^v, `xMaxYMid^v, `xMaxYMax^v } ] ⇒ %translate-x ~INCBY ( %e-横幅 ~MINUS %vb-横幅 ~MUL %scale-x ) ◎ If align contains 'xMax', add (e-width - vb-width * scale-x) to translate-x.
  13. ~IF[ %align ~IN { `xMinYMid^v, `xMidYMid^v, `xMaxYMid^v } ] ⇒ %translate-y ~INCBY ( %e-縦幅 ~MINUS %vb-縦幅 ~MUL %scale-y ) ~DIV 2 ◎ If align contains 'yMid', add (e-height - vb-height * scale-y) / 2 to translate-y.
  14. ~IF[ %align ~IN { `xMinYMax^v, `xMidYMax^v, `xMaxYMax^v } ] ⇒ %translate-y ~INCBY ( %e-縦幅 ~MINUS %vb-縦幅 ~MUL %scale-y ) ◎ If align contains 'yMax', add (e-height - vb-height * scale-y) to translate-y.
  15. ~RET 次に与える値が表現する変形 ⇒ translate( %translate-x, %translate-y) scale( %scale-x, %scale-y ) ◎ The transform applied to content contained by the element is given by translate(translate-x, translate-y) scale(scale-x, scale-y).

8.3. 初期~表示域

~SVG内容の`初期~表示域$の横幅は、次に従って決定されるモノトスル: ◎ The initial viewport's width, must be\

  1. ~IF[ 次に挙げる条件~すべてが満たされる ]…: ◎ the value of the width presentation attribute on the outermost svg element, unless the following conditions are met:

    • ~SVG内容は、[ 参照により埋込まれた資源に別々に格納されている( ~HTML内の `object^e 要素など)か ある文書の中に~inlineに埋込まれている ] ◎ the SVG content is a separately stored resource that is embedded by reference (such as the ‘object’ element in HTML), or the SVG content is embedded inline within a containing document;
    • 参照元の要素/包含している文書は,~CSSを利用して~styleされている `CSS2$r ◎ and the referencing element or containing document is styled using CSS [CSS2];
    • [ 参照元の要素(例: `object^e 要素)/ 包含している文書の`最外縁の~svg要素$ ]上に ~CSSに互換な位置決め~prop `CSS2$r が指定されていて,表示域の横幅を確立するに足るものである ◎ and there are CSS-compatible positioning properties ([CSS2], section 9.3) specified on the referencing element (e.g., the ‘object’ element) or on the containing document's outermost svg element that are sufficient to establish the width of the viewport.

    …ならば ⇒ ~RET 位置決め~propを介して確立される結果の横幅 ◎ Under these conditions, the viewport's width must be established via the positioning properties.

  2. ~RET `最外縁の~svg要素$上の `width$p 呈示~属性の値 【初期~値 `auto^v の場合、 100% として扱われることになる。】 ◎ ↑

~SVG内容の`初期~表示域$の横幅は、上の手続きの[ 横幅を縦幅, `width$p を `height$p ]に読み替えて決定されるモノトスル。 ◎ Similarly, if there are positioning properties specified on the referencing element or on the outermost svg element that are sufficient to establish the height of the viewport, then these positioning properties must establish the viewport's height; otherwise, the initial viewport's height must be the value of the height presentation attribute on the outermost svg element.

`最外縁の~svg要素$上の[ `width$p / `height$p ]呈示~属性は,`利用元~単位$による値をとる場合(すなわち単位~識別子は供されていない)、その単位は `px^u と見做される(`単位$secを見よ)。 ◎ If the width or height presentation attributes on the outermost svg element are in user units (i.e., no unit identifier has been provided), then the value is assumed to be equivalent to the same number of "px" units (see Units).

次の例においては、~SVG~graphicは[ ~CSS~layout規則を利用して整形されている親~XML文書 ]の中に~inlineに埋込まれている。 `最外縁の~svg要素$上には~CSS位置決め~propは供されていないので、[ `width^a / `height^a ]属性に指定された値[ `100px^v / `200px^v ]が`初期~表示域$の~sizeを決定する: ◎ In the following example, an SVG graphic is embedded inline within a parent XML document which is formatted using CSS layout rules. Since CSS positioning properties are not provided on the outermost svg element, the width="100px" and height="200px" attributes determine the size of the initial viewport:

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://some.url">

   <!-- 
~SVG~graphic
◎
SVG graphic
 -->
   <svg xmlns='http://www.w3.org/2000/svg'
      width="100px" height="200px">
      <path d="M100,100 Q200,400,300,100"/>
      <!-- 
~SVG~graphicの残りはここに来る
◎
rest of SVG graphic would go here
 -->
   </svg>

</parent>

8.4. 初期~座標系

~SVG~UAは、`最外縁の~svg要素$用の 初期~時の[ `表示域~座標系$, `利用元~座標系$ ]を,次をすべて満たすように決定するモノトスル: ◎ For the outermost svg element, the SVG user agent must determine an initial viewport coordinate system and an initial user coordinate system such that\

自立的~SVG文書, および[ 親~文書の中に(参照または~inlineにより)埋込まれた~SVG文書片であって,親の~layoutは~CSSにより決定されているもの `CSS2$r ]は、その初期~時の表示域~座標系(したがって初期~時の利用元~座標系)は,次を満たすモノトスル: ◎ In stand-alone SVG documents and in SVG document fragments embedded (by reference or inline) within parent documents where the parent's layout is determined by CSS [CSS2], the initial viewport coordinate system (and therefore the initial user coordinate system) must

~SVG実装が[ ~CSS 2.1互換 `px^u 単位を利用している文書の~style付けを~supportする~UA ]の一部を成す場合、~SVG~UAは,自身の 1 `px^u 単位の~size用の初期~値を[ 現実の単位において,他の~style付け演算~用に利用される値に合致する ]ように設定するベキである。 他の場合、~UAは, 1 `px^u 単位の~sizeを[ 自身の環境から決定できるならば その値を利用する / ~ELSE_ 適切な~sizeを選ぶ ]ベキである。 いずれにせよ、 1 `px^u の~sizeは `CSS2$r に 述べられる規則 に適合させるモノトスル。 ◎ If the SVG implementation is part of a user agent which supports styling documents using CSS 2.1 compatible px units, then the SVG user agent should set its initial value for the size of a px unit in real world units to match the value used for other styling operations; otherwise, if the user agent can determine the size of a px unit from its environment, it should use that value; otherwise, it should choose an appropriate size for one px unit. In all cases, the size of a px must be in conformance with the rules described in CSS 2.1 ([CSS2], section 4.3.2).

下の例 `InitialCoords@xl に,初期~座標系の原点は左上隅にあり,~x軸は右を指し,~y軸は下方を指している様子を示す。 初期~時の利用元~座標系の 1 利用元~単位は、親の(暗黙的な/明示的な)~UAの “画素” に等しい。 ◎ Example InitialCoords below shows that the initial coordinate system has the origin at the top/left with the x-axis pointing to the right and the y-axis pointing down. The initial user coordinate system has one user unit equal to the parent (implicit or explicit) user agent's "pixel".

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>
例
`InitialCoords^xl 
— ~SVGの初期~座標系
◎
Example InitialCoords - SVG's initial coordinate system
</desc>

  <g fill="none" stroke="black" stroke-width="3" >
    <line x1="0" y1="1.5" x2="300" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="100" />
  </g>
  <g fill="red" stroke="none" >
    <rect x="0" y="0" width="3" height="3" />
    <rect x="297" y="0" width="3" height="3" />
    <rect x="0" y="97" width="3" height="3" />
  </g>
  <g font-size="14" font-family="Verdana" >
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>
  </g>
</svg>
`InitialCoords^dgm
例 `InitialCoords^xl ◎ Example InitialCoords
`coords/InitialCoords.svg^viewAs

8.5. `transform^p ~prop

~UAは、 `css-transforms-1$r に定義される `transform$p ~prop, それ用の呈示~属性を~supportするモノトスル。 ◎ User agents must support the transform property and presentation attribute as defined in [css-transforms-1].

8.6. `viewBox^a 属性

◎属名 `viewBox^a ◎属値 [ `min-x^t,? `min-y^t,? `width^t,? `height^t ] ◎属初 指定されていないかのようになる。【特に、値が妥当でない場合。】 ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable viewBox [<min-x>,? <min-y>,? <width>,? <height>] As if not specified. yes
`min-x^t = `number$t
`min-y^t = `number$t
`width^t = `number$t
`height^t = `number$t

`svg$e 要素~上の変形は、 `viewBox$a 属性に因り,ちょっと特別である。 変形は[ `svg$e には,その変形が設定された親~要素がある ]かのように適用されるベキである ⇒ RESOLUTION: `transform$p ~propは、概念的には `svg^e 要素の外側に適用され、視覚的な結果において,呈示~属性と~style~propの間に相違は無い( `http://www.w3.org/2015/01/08-svg-minutes.html$refer )。 ◎ Transform on the ‘svg’ element is a bit special due to the ‘viewBox’ attribute. The transform should be applied as if the ‘svg’ had a parent element with that transform set.\ ◎ RESOLUTION: transform property applies conceptually to the outside of the 'svg' element and there is no difference between presentation attribute and style property (in terms of the visual result).

注記: `viewBox$a 属性は、 `preserveAspectRatio$a 属性と併用されたときは,`~SVG表示域$を特定0の容器~要素に収まるよう伸縮する能力を供する。 ◎ The ‘viewBox’ attribute, in conjunction with the ‘preserveAspectRatio’ attribute, provides the capability to stretch an SVG viewport to fit a particular container element.

`viewBox$a 属性の値は、[[ 0 個以上の空白, 0 〜1 個の~comma ]が成す,空でない文字列 ]で区切られた 4 個の数[ `min-x^t, `min-y^t, `width^t, `height^t ]からなり、[ `preserveAspectRatio$a 属性も織り込む下で,所与の要素が確立する`~SVG表示域$の限界域に対応付けられるベキ矩形 ]を,【要素の内容における】利用元~空間~内で指定する。 この矩形 — すなわち、[ 左上隅の座標は ( `min-x^t, `min-y^t ), 横幅 `width^t, 縦幅 `height^t ]にされた矩形 — は、要素の `~viewbox@ と称される。 【この用語 ~viewboxは、他所を簡潔に述べるための,この訳による追加。】 ◎ The value of the ‘viewBox’ attribute is a list of four numbers <min-x>, <min-y>, <width> and <height>, separated by whitespace and/or a comma, that specify a rectangle in user space that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the ‘preserveAspectRatio’ attribute.\

`viewBox$a 属性が在る場合、表示域~座標系には[ ~SVG表示域に等価な変形の算出-法 に述べた変形n ]が適用されることになる。 ◎ The presence of the ‘viewBox’ attribute results in a transformation being applied to the viewport coordinate system as described in Computing the equivalent transform of an SVG viewport.

[ `width^t / `height^t ]に対しては、[ 負な値は,~errorであり `viewBox$a 属性を無効~化する。 値 0 は,要素の描画を不能化する ]。 ◎ A negative value for <width> or <height> is an error and invalidates the ‘viewBox’ attribute. A value of zero disables rendering of the element.

例 `ViewBox@xl は、`最外縁の~svg要素$上の `viewBox$a 属性の利用を図解する — それは、~SVG内容は,`~SVG表示域$の限界域に収まるように伸縮するベキであることを指定する。 ◎ Example ViewBox illustrates the use of the ‘viewBox’ attribute on the outermost svg element to specify that the SVG content should stretch to fit bounds of the SVG viewport.

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>
例 `ViewBox^xl
—
`viewBox^a 属性を利用して,初期~時の利用元~座標系を自動的に作成する。
それにより、~graphicは `~SVG表示域$の中へ収まるよう拡縮される
— ~SVG表示域の~sizeが何であれ。
◎
Example ViewBox - uses the viewBox attribute to automatically create an initial user coordinate system which causes the graphic to scale to fit into the SVG viewport no matter what size the SVG viewport is.
</desc>

  <!-- 
この矩形は、利用元~座標系において,
( 0, 0 ) から ( 1500,1000 ) までにわたる。
`svg^e 要素には `viewBox^a 属性があるので、矩形は~SVG内容~用に予約された区画~全体を埋めることになる。
◎
This rectangle goes from (0,0) to (1500,1000) in user coordinate system. Because of the viewBox attribute above, the rectangle will end up filling the entire area reserved for the SVG content.
 -->
  <rect x="0" y="0" width="1500" height="1000"
        fill="yellow" stroke="blue" stroke-width="12"  />
  <!-- 
大きな赤い三角形
◎
A large, red triangle
 -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>
  <!-- 
~SVG表示域の横幅ほぼ全体を占める~text
◎
A text string that spans most of the SVG viewport
 -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    Stretch to fit
  </text>
</svg>
例 `ViewBox^xl: [ `width=300px^a, `height=200px^a ]にされた~SVG表示域の中に描画されたとき( 1 個目の図)と[ `width=150px^a, `height=200px^a ]にされた~SVG表示域の中に描画されたとき( 2 個目の図)。 ◎ Example ViewBox ◎ Rendered into SVG viewport with width=300px, height=200px ◎ Rendered into SVG viewport with width=150px, height=200px
`ViewBox^dgm `ViewBox-Width150^dgm
`coords/ViewBox.svg^viewAs

`viewBox$a 属性の効果は、[ 利用元~座標系~内で指定された矩形を,指名された領域(~SVG表示域であることが多い)の限界域へ対応付ける ]ような適切な変形n行列を,~UAが自動的に給するようにする。 ~SVG表示域の寸法は 300 × 200 `px^u であるときに,上の 1 個目の図に示した効果を達成するためには、~UAは,[ ~X, ~Y とも 0.2 倍に拡縮する変形n ]を自動的に挿入する必要がある。 その効果は、[ ~SVG表示域の~sizeはそのままに,文書~内に次のように変形nを補足したとき ]と等価になる: ◎ The effect of the ‘viewBox’ attribute is that the user agent automatically supplies the appropriate transformation matrix to map the specified rectangle in user coordinate system to the bounds of a designated region (often, the SVG viewport). To achieve the effect of the example on the left, with SVG viewport dimensions of 300 by 200 pixels, the user agent needs to automatically insert a transformation which scales both X and Y by 0.2. The effect is equivalent to having an SVG viewport of size 300px by 200px and the following supplemental transformation in the document, as follows:

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
	<g transform="scale(0.2)">
    <!-- 
文書の残りはここに来る
◎
Rest of document goes here
 -->
	</g>
</svg>

~SVG表示域の寸法は 150 × 200 `px^u のときに,上の 2 個目の図に示した効果を達成するためには、 ~UAは,[ ~Xを 0.1 倍, ~Yを 0.2 倍に拡縮する変形n ]を自動的に挿入する必要がある。 その効果は、[ ~SVG表示域の~sizeはそのままに,文書~内に次のように変形nを補足したとき ]と等価になる: ◎ To achieve the effect of the example on the right, with SVG viewport dimensions of 150 by 200 pixels, the user agent needs to automatically insert a transformation which scales X by 0.1 and Y by 0.2. The effect is equivalent to having an SVG viewport of size 150px by 200px and the following supplemental transformation in the document, as follows:

<?xml version="1.0" standalone="no"?>
<svg width="150px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
	<g transform="scale(0.1 0.2)">
    <!-- 
文書の残りはここに来る
◎
Rest of document goes here
 -->
	</g>
</svg>
注記:

より~~一般には、~UAは — 拡縮-変形nに加えて — 並進-変形nも給する必要があることに注意。 例えば,`最外縁の~svg要素$上で `viewBox$a 属性の[ `min-x^t / `min-y^t ]用に 0 以外の値を指定した場合、並進-変形nも必要になる。 ◎ Note that in some cases the user agent will need to supply a translate transformation in addition to a scale transformation. For example, on an outermost svg element, a translate transformation will be needed if the ‘viewBox’ attributes specifies values other than zero for <min-x> or <min-y>.

要素に[ `transform$p (または `patternTransform$a ), `viewBox$a ]の両者とも適用される場合、要素は,両者それぞれに新たな座標系を確立する。 この場合,要素の内容は、先ず `viewBox$a による変形が適用されてから `transform$p による変形が適用されることになる。 【要素を `g^e で括って, `transform^p を `g^e に移したのと同じ効果になる。】 ◎ If both transform (or ‘patternTransform’) and ‘viewBox’ are applied to an element two new coordinate systems are established. transform establishes the first new coordinate system for the element. ‘viewBox’ establishes a second coordinate system for all descendants of the element. The first coordinate system is post-multiplied by the second coordinate system.

`transform$p ~propと違って, `viewBox$a 属性に因り作成される自動的な変形nは、その属性を有する要素~上の[ `x^a, `y^a, `width^a, `height^a ]属性(あるいは、 `marker$e 要素の事例では[ `markerWidth$a, `markerHeight$a ]属性)には影響しない。 したがって,上の例に示した `svg$e 要素は[ `width$p / `height$p ]呈示~属性も `viewBox$a 属性も有するが、[ `width$p, `height$p ]は[ `viewBox$a 変形nが`適用される前^emに存在する座標系 ]における値を表現する。 他方, `transform$p の様な~propは、[ 当の要素~上の他の【 `viewBox^a 以外の】すべての属性, 当の要素の子孫 ]用に新たな座標系を確立する。 ◎ Unlike the transform property, the automatic transformation that is created due to a ‘viewBox’ does not affect the ‘x’, ‘y’, ‘width’ and ‘height’ attributes (or in the case of the ‘marker’ element, the ‘markerWidth’ and ‘markerHeight’ attributes) on the element with the ‘viewBox’ attribute. Thus, in the example above which shows an ‘svg’ element which has width and height presentation attributes and a ‘viewBox’ attribute, the width and height represent values in the coordinate system that exists before the ‘viewBox’ transformation is applied. On the other hand, like the transform property, it does establish a new coordinate system for all other attributes and for descendant elements.

8.7. `preserveAspectRatio^a 属性

◎属名 `preserveAspectRatio^a ◎属値 `align$t `meetOrSlice$t? ◎属初 `xMidYMid meet^v ◎属ア 可 ◎表終 ◎ Name Value Initial value Animatable preserveAspectRatio <align> <meetOrSlice>? xMidYMid meet yes
`align@t =
    `none^v
    | `xMinYMin^v | `xMidYMin^v | `xMaxYMin^v
    | `xMinYMid^v | `xMidYMid^v | `xMaxYMid^v
    | `xMinYMax^v | `xMidYMax^v | `xMaxYMax^v

`meetOrSlice@t = `meet^v | `slice^v
一様な拡縮を強制するかどうかを指示する。 新たな~SVG表示域を確立する すべての要素(`表示域を確立する要素$secを見よ), および[ `image$e, `marker$e, `pattern$e, `view$e ]要素に適用される。 ◎ Indicates whether or not to force uniform scaling. Applies to all elements that establish a new SVG viewport (see elements that establish SVG viewports), plus the ‘image’, ‘marker’, ‘pattern’ and ‘view’ elements

概して, `viewBox$a 属性を利用しているときは、[ ~SVG表示域~全体を占めるかつ収まるよう,~graphicを【 x, y 軸で】非~一様に伸縮する方が望ましい事例 ]もあれば,[ 一様な拡縮を利用して,~graphicの縦横比を保全する方が望ましい事例 ]もある。 ◎ In some cases, typically when using the ‘viewBox’ attribute, it is desirable that the graphics stretch to fit non-uniformly to take up the entire SVG viewport. In other cases, it is desirable that uniform scaling be used for the purposes of preserving the aspect ratio of the graphics.

新たな~SVG表示域を確立する要素(`表示域を確立する要素$secを見よ),および[ `marker$e / `pattern$e / `view$e ]要素~用の `preserveAspectRatio$a は、同じ要素~上に `viewBox$a が供された【かつ その値は妥当である】ときに限り適用され,他の場合は無視される。 ◎ For elements that establish a new SVG viewport (see elements that establish SVG viewports), plus the ‘marker’, ‘pattern’ and ‘view’ elements, ‘preserveAspectRatio’ only applies when a value has been provided for ‘viewBox’ on the same element. For these elements, if attribute ‘viewBox’ is not provided, then ‘preserveAspectRatio’ is ignored.

`image$e 要素~用の `preserveAspectRatio$a は、次を指示する ⇒# 参照先の画像は,基準-矩形にどう収まるベキか / 参照先の画像の縦横比は,現在の利用元~座標系においても保全されるベキかどうか ◎ For ‘image’ elements, ‘preserveAspectRatio’ indicates how referenced images should be fitted with respect to the reference rectangle and whether the aspect ratio of the referenced image should be preserved with respect to the current user coordinate system.

`align$t ~parameterは、一様な拡縮を強制するかどうか, および 強制する場合に要素の[ `~viewbox$, ~SVG表示域で互いの縦横比が合致しないときに利用する整列~手法 ]を指示する。 ◎ The <align> parameter indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the ‘viewBox’ doesn't match the aspect ratio of the SVG viewport. The <align> parameter must be one of the following strings:

`align$t ~parameterは、以下に挙げるいずれかの文字列でなければナラナイ:

任意選択の `meetOrSlice$t ~parameterを供する場合、 1 個~以上の~spaceで `align$t 値と区切った上で,次のいずれかの文字列にしなければナラナイ: ◎ The <meetOrSlice> parameter is optional and, if provided, is separated from the <align> value by one or more spaces and then must be one of the following strings:

`meet^v (これが既定)
~graphicを[ 縦横比を保全しつつ, `~viewbox$全体が~SVG表示域の中で可視になる ]ような最大~sizeに拡縮する。 ◎ meet (the default) - Scale the graphic such that: • aspect ratio is preserved • the entire ‘viewBox’ is visible within the SVG viewport • the ‘viewBox’ is scaled up as much as possible, while still meeting the other criteria
この事例では、~graphicの縦横比が~SVG表示域に合致しない場合,~SVG表示域を成す一部は`~viewbox$の限界域を超えて拡がることになる(すなわち,`~viewbox$が描かれる区画は、~SVG表示域より小さくなる)。 ◎ In this case, if the aspect ratio of the graphic does not match the SVG viewport, some of the SVG viewport will extend beyond the bounds of the ‘viewBox’ (i.e., the area into which the ‘viewBox’ will draw will be smaller than the SVG viewport).
`slice^v
~graphicを[ 縦横比を保全しつつ, `~viewbox$が~SVG表示域~全体を覆う ]ような最小~sizeに拡縮する。 ◎ slice - Scale the graphic such that: • 縦横比を保全する • aspect ratio is preserved • the entire SVG viewport is covered by the ‘viewBox’ • the ‘viewBox’ is scaled down as much as possible, while still meeting the other criteria
この事例では、~graphicの縦横比が~SVG表示域に合致しない場合, `~viewbox$を成す一部は~SVG表示域の限界域を超えて拡がることになる(すなわち, `~viewbox$が描かれる区画は、~SVG表示域よりより大きくなる)。 ◎ In this case, if the aspect ratio of the ‘viewBox’ does not match the SVG viewport, some of the ‘viewBox’ will extend beyond the bounds of the SVG viewport (i.e., the area into which the ‘viewBox’ will draw is larger than the SVG viewport).

例 `PreserveAspectRatio@xl に、 `preserveAspectRatio$a 用の各種~optionを図解する。 この例は、`最外縁の~svg要素$の内側に `svg$e 下位-要素を埋込んで含めることにより,いくつかの新たな~SVG表示域を作成する(`新たな~SVG表示域の確立-法$secを見よ)。 ◎ Example PreserveAspectRatio illustrates the various options on ‘preserveAspectRatio’. The example creates several new SVG viewports by including ‘svg’ sub-elements embedded inside the outermost svg element (see Establishing a new SVG viewport).

<svg
  width="450px" height="350px"
  xmlns="http://www.w3.org/2000/svg"
  viewbox="0 0 450 350"
>

  <desc>PreserveAspectRatio 属性の用例</desc>

  <style type="text/css">
    text { font-size: 9; text-anchor:middle; font-family: monospace;}
    text.legend { font-family: serif;}
    rect { fill: none; stroke: blue;}
    .bounds { fill:black; stroke:red; stroke-width:2px; }
	svg { outline: solid blue thin;}
  </style>

  <defs>
    <g id="smile">
      <circle cx="0" cy="0" r="10"  fill="yellow"/>
      <circle cx="-3" cy="-3" r="1.5" fill="black"/>
      <circle cx="3" cy="-3" r="1.5" fill="black"/>
      <path d="M -5 4 A 8 8 0 0 0 5 4" stroke="black" stroke-width="2"/>
    </g>

    <g id="smile-1">
      <rect x="1" y="1" width="28" height="48" class="bounds"/>
      <use href="#smile" transform="translate(15,25)"/>
    </g>
    <g id="smile-2">
      <rect x="1" y="1" width="48" height="28" class="bounds"/>
      <use href="#smile" transform="translate(25,15)"/>
    </g>
  </defs>

  <rect x="0" y="0" width="450" height="350"/>

  <g transform="translate(110,40)">
    <text class="legend" x="0" y="-10">収める SVG(縦長)</text>
    <use href="#smile-1" transform="translate(-15,0)"/>
  </g>

  <g transform="translate(340,40)">
    <text class="legend" x="0" y="-10">収める SVG(横長)</text>
    <use href="#smile-2" transform="translate(-25,0)"/>
  </g>

  <g transform="translate(225,40)">
    <text class="legend" x="0" y="-10">表示域</text>
    <rect x="0" y="0" width="40" height="40"  transform="translate(-20,0)"/>
  </g>

  <g id="meet-group-1" transform="translate(20, 170)">
    <text x="90" y="-40">meet</text>
    <g>
      <text x="20" y="-10">xMin*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text x="20" y="-10">xMid*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
    <g transform="translate(140,0)">
      <text x="20" y="-10">xMax*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
  </g>

  <g id="meet-group-2" transform="translate(250, 170)">
    <text x="90" y="-40">meet</text>
    <g>
      <text x="20" y="-10">*YMin</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
    <g transform="translate(70, 0)">
      <text x="20" y="-10">*YMid</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 30" width="40" height="40">
	<use href="#smile-2"/>
      </svg>
    </g>
    <g transform="translate(140, 0)">
      <text x="20" y="-10">*YMax</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
  </g>

  <g id="slice-group-2" transform="translate(20, 290)">
    <text x="90" y="-40">slice</text>
    <g>
      <text x="20" y="-10">*YMin</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text x="20" y="-10">*YMid</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
    <g transform="translate(140,0)">
      <text x="20" y="-10">*YMax</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
  </g>

  <g id="slice-group-1" transform="translate(250, 290)">
    <text x="90" y="-40">slice</text>
    <g>
      <text x="20" y="-10">xMin*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text x="20" y="-10">xMid*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
    <g transform="translate(140,0)">
      <text x="20" y="-10">xMax*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
  </g>
</svg>
`PreserveAspectRatio^dgm
例 `PreserveAspectRatio^xl ◎ Example PreserveAspectRatio

8.8. 新たな~SVG表示域の確立-法

`svg$e 要素(~SVG内容の内側にあるものも含む)は、新たな~SVG表示域を作成する — 要素が包含する~graphicはすべて,その中に描かれる。 これは、[ 新たな表示域~座標系, 新たな利用元~座標系 ]の両者を暗黙的に確立する。 加えて,新たな~SVG表示域が確立される結果、その中の百分率~単位の意味も変わる(`単位$secを見よ)。 ◎ Including an ‘svg’ element inside SVG content creates a new SVG viewport into which all contained graphics are drawn; this implicitly establishes both a new viewport coordinate system and a new user coordinate system. Additionally, there is a new meaning for percentage units therein, because a new SVG viewport has been established (see Units).

`svg$e 要素など,新たな~SVG表示域を確立している要素 %要素 においては、新たな~SVG表示域の限界域は[ %要素 上の `x^a, `y^a, `width^a, `height^a ]属性で定義される。 [ 新たな表示域~座標系, 新たな利用元~座標系 ]とも,その原点は %要素 上の ( `x^a, `y^a ) の値で与えられる。 両~座標系とも,その方位は、 %要素 用の現在の利用元~座標系の方位に対応する。 両~座標系とも,その 1 単位は、 %要素 用の現在の利用元~座標系の 1 単位と同じ~sizeになる。 ◎ The bounds of the new SVG viewport are defined by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes on the element establishing the new SVG viewport, such as an ‘svg’ element. Both the new viewport coordinate system and the new user coordinate system have their origins at (‘x’, ‘y’), where ‘x’ and ‘y’ represent the value of the corresponding attributes on the element establishing the SVG viewport. The orientation of the new viewport coordinate system and the new user coordinate system correspond to the orientation of the current user coordinate system for the element establishing the SVG viewport. A single unit in the new viewport coordinate system and the new user coordinate system are the same size as a single unit in the current user coordinate system for the element establishing the SVG viewport.

例: ◎ Here is an example:

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <desc>
この~SVG絵図は、別のそれを埋込むので,新たな~SVG表示域を確立している
◎
This SVG drawing embeds another one, thus establishing a new SVG viewport
</desc>
  <!-- 
次の言明は、新たな~SVG表示域を確立して,その中に別の~SVG絵図を描画する
◎
The following statement establishing a new SVG viewport and renders SVG drawing B into that SVG viewport
 -->
  <svg x="25%" y="25%" width="50%" height="50%">
     <!-- 
別の絵図はここに来る
◎
drawing B goes here
 -->
  </svg>
</svg>

新たな~SVG表示域を多用する例は、例 `PreserveAspectRatio$xl を見よ。 ◎ For an extensive example of creating new SVG viewports, see Example PreserveAspectRatio.

次に挙げる要素は、新たな~SVG表示域を確立する ⇒# `svg$e 要素, `use$e 要素により~instance化された `symbol$e 要素 ◎ The following elements establish new SVG viewports: • The ‘svg’ element • A ‘symbol’ element that is instanced by a ‘use’ element.

注記: 歴史的な理由から,[ `pattern$e / `marker$e ]要素は、 `viewBox$a 属性を受容するにもかかわらず,新たな表示域は作成しない。 [ `clipPath$e / `mask$e ]要素も,新たな表示域は作成しない。 これらの要素の内容の中の百分率による長さは、~graphicな効果~領域の寸法に比例しない。 ◎ For historical reasons, the ‘pattern’ and ‘marker’ elements do not create a new viewport, despite accepting a ‘viewBox’ attribute. Neither do the ‘clipPath’ or ‘mask’ elements. Percentage lengths within the content of these elements are not proportional to the dimensions of the graphical effect region.

`foreignObject$e 要素は、その子~内容~用に新たな ~CSS包含塊 を確立する。 これには、新たな表示域に類似な,子~内容~用の~layoutの視野を設定し直す効果がある。 しかしながら, `foreignObject$e の子孫である `svg$e 要素は、その子孫の~SVG要素を描画するため,~SVG文書片と~SVG表示域を確立するモノトスル。 ◎ The ‘foreignObject’ element establishes a new CSS containing block for its child content. This has some effects similar to a new viewport, resetting the scope of layout for child content. However, in order to render SVG elements that are descendents of ‘foreignObject’, a new ‘svg’ element must establish an SVG document fragment and SVG viewport.

`image$e 要素は、参照先の文書~用に新たな文書~表示域を作成する。 もちろん,参照先の文書は~SVG~fileである場合、それは自前の~SVG表示域を確立することになる。 ◎ An ‘image’ creates a new document viewport for the referenced document. If the referenced document is a SVG file, it will of course establish its own SVG viewport.

新たな~SVG表示域が新たな切抜き~pathも追加的に確立するかどうかは、当の~SVG表示域を確立した要素~上の `overflow$p ~propの値により決定される。 ◎ Whether a new SVG viewport also establishes a new additional clipping path is determined by the value of the overflow property on the element that establishes the new SVG viewport.

8.9. 単位

~SVGは、[ 属性 / 呈示~属性 / ~CSS~prop ]用に `css-values$r による共通な[ 値と単位 ]の記述と定義に従う。 各[ 属性/~prop ]には、利用する成分~値の型が指定されなければナラナイ。 [ ~CSS~WG, または~SVG~WG ]が発行する[ 後継の, または拡張する ]仕様は、[ 基本~data型を拡張する, または新たな~data型を追加する ]こともある。 ◎ SVG follows the description and definition of common values and units from the CSS Values and Units Module [css-values] for attributes, presentation attributes and CSS properties. Each attribute and property must specify the used component value type. Subsequent or extending specifications published by the CSS WG or SVG WG may extend basic data types or add new data types.

[ `percentage$t として表出され,`~SVG表示域$ %表示域 の~sizeに相対的になる ]ものと定義された %寸法 用に与えられた値は、以下において[ %基準~横幅, %基準~縦幅 ]は[ %表示域 に適用される `viewBox$a 属性が指定されているならば `~viewbox$の~size / ~ELSE_ %表示域 の~size ]を利用元~単位で表すとするとき: ◎ For <percentage> values that are defined to be relative to the size of SVG viewport:

下の例 `Units@xl に、各 種別の単位~用の,いくつかの処理~規則を図解する。 ◎ Example Units below illustrates some of the processing rules for different types of units.

<?xml version="1.0" standalone="no"?>
<svg width="400px" height="200px" viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example Units</title>
  <desc>
様々な単位~optionを図解する
◎
Illustrates various units options
</desc>

  <!-- 
全体の枠線
◎
Frame the picture
 -->
  <rect x="5" y="5" width="3990" height="1990" 
        fill="none" stroke="blue" stroke-width="10"/>

  <g fill="blue" stroke="red" font-family="Verdana" font-size="150">
    <!-- 
絶対~単位~指定子
◎
Absolute unit specifiers
 -->
    <g transform="translate(400,0)">
      <text x="-50" y="300" fill="black" stroke="none">Abs. units:</text>
      <rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
      <rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
      </g>
    </g>

    <!-- 
相対~単位~指定子
◎
Relative unit specifiers
 -->
    <g transform="translate(1600,0)">
      <text x="-50" y="300" fill="black" stroke="none">Rel. units:</text>
      <rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
      <rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
      </g>
    </g>

    <!-- 
百分率
◎
Percentages
 -->
    <g transform="translate(2800,0)">
      <text x="-50" y="300" fill="black" stroke="none">Percentages:</text>
      <rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
      <rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
      </g>
    </g>
  </g>
</svg>
`Units^dgm
例 `Units^xl ◎ Example Units
  • 左列にある 3 個の矩形は、絶対~単位~識別子 `in^u 単位(~inch)の利用をデモる。 ~CSSは 1 `in^u は 96 `px^u に等しいものと定義するので、 `in^u 単位で指定された上段の矩形の~sizeは,【 `px^u 単位に等しい】利用元~単位で指定された中段の矩形と正確に同じになる。 下段の矩形は、`in^u 単位で指定された値が拡縮されたとき何が起こるかを図解する。 ◎ The three rectangles on the left demonstrate the use of one of the absolute unit identifiers, the "in" unit (inch). CSS defines 1 inch to be equal to 96 pixels. Therefore, the topmost rectangle, which is specified in inches, is exactly the same size as the middle rectangle, which is specified in user units such that there are 96 user units for each corresponding inch in the topmost rectangle. The bottom rectangle of the group illustrates what happens when values specified in inches are scaled.
  • 中央列にある 3 個の矩形は、相対~単位~識別子 `em^u 単位の利用をデモる。 最外縁 `g$e 要素~上では `font-size$p ~propは `150^v に設定されているので、各 `em^u 単位は 150 利用元~単位に等しくなる。 `em^u 単位で指定された上段の矩形の~sizeは、利用元~単位で指定された中段の矩形と正確に同じになる。 下段の矩形は、 `em^u 単位で指定された値が拡縮されたとき何が起こるかを図解する。 ◎ The three rectangles in the middle demonstrate the use of one of the relative unit identifiers, the "em" unit. Because the font-size property has been set to 150 on the outermost ‘g’ element, each "em" unit is equal to 150 user units. The topmost rectangle, which is specified in "em" units, is exactly the same size as the middle rectangle, which is specified in user units such that there are 150 user units for each corresponding "em" unit in the topmost rectangle. The bottom rectangle of the group illustrates what happens when values specified in "em" units are scaled.
  • 右列にある 3 個の矩形は、百分率の利用をデモる。 ~SVG表示域~要素(この事例では`最外縁の~svg要素$)用の利用元~座標系における `~SVG表示域$の横幅, 縦幅は、順に 4000, 2000 になることに注意 — `~viewbox$は,利用元~座標系に変形されるので。 百分率~単位で指定された上段の矩形は、等価な利用元~単位で指定された中段の矩形と正確に同じ~sizeになる。 特に,中段の矩形における `stroke-width$p ~propは、 ( ~SVG表示域の対角線長さ ~DIV `sqrt^op( 2 ) ) の 1% — この事例では .01 ~MUL `sqrt^op( (4000 ~MUL 4000 ~PLUS 2000 ~MUL 2000) ~DIV 2 ) (およそ 31.62 ) — に設定されることに注意。 下段の矩形は、百分率~単位で指定された値が拡縮されたとき,何が起こるかを図解する。 ◎ The three rectangles on the right demonstrate the use of percentages. Note that the width and height of the SVG viewport in the user coordinate system for the SVG viewport element (in this case, the outermost svg element) are 4000 and 2000, respectively, because processing the ‘viewBox’ attribute results in a transformed user coordinate system. The topmost rectangle, which is specified in percentage units, is exactly the same size as the middle rectangle, which is specified in equivalent user units. In particular, note that the stroke-width property in the middle rectangle is set to 1% of the sqrt((actual-width)**2 + (actual-height)**2) / sqrt(2), which in this case is .01*sqrt(4000*4000+2000*2000)/sqrt(2), or 31.62. The bottom rectangle of the group illustrates what happens when values specified in percentage units are scaled.

8.10. 限界~box

要素の `限界~box@ ( `bounding box^en, 略称 `bbox^en )とは、自身とその子孫~すべてを封入する, かつ 要素の利用元~座標系の軸に辺が平行な,最も狭い矩形である。 ◎ bounding box ◎ The bounding box (or "bbox") of an element is the tightest fitting rectangle aligned with the axes of that element's user coordinate system that entirely encloses it and its descendants.

要素~用の限界~boxは、次の 3 種類として算出され得る: ◎ Three kinds of bounding boxes can be computed for an element:

`~obj限界~box@
要素の幾何-図形のみを包含する限界~box。 これは、`基本~図形$に対しては,~fillされる区画になる。 他が指定されずに単に “限界~box” と記されたときは、これを意味する。 ◎ The object bounding box is the bounding box that contains only an element's geometric shape. For basic shapes, this is the area that is filled. Unless otherwise specified, this is what is meant by the unqualified term "bounding box".
`~stroke限界~box@
要素の[ 幾何-図形, `~stroke図形$ ]を包含する限界~box。 ◎ The stroke bounding box is the bounding box that contains an element's geometric shape and its stroke shape.
`装飾d限界~box@
要素の[ 幾何-図形, `~stroke図形$, ~marker ]を包含する限界~box。 ◎ The decorated bounding box is the bounding box that contains an element's geometric shape, its stroke shape and its markers.

注記: 要素~上の次に挙げる~propの値は、要素の限界~boxに対する効果は無いことに注意 ⇒ `opacity$p, `visibility$p, `fill$p, `fill-opacity$p, `fill-rule$p, `stroke-dasharray$p, `stroke-dashoffset$p ◎ Note that the values of the opacity, visibility, fill, fill-opacity, fill-rule, stroke-dasharray and stroke-dashoffset properties on an element have no effect on the bounding box of an element.

曲線を含む図形~用の限界~boxは、その端点 【図形を成す各`~path区分$の端点】 のみならず,図形を成す辺に沿うすべての部位を封入するモノトスル。 曲線を定義する制御-点(三次~Bezier~commandのそれなど)は、限界~boxの寸法には寄与しないモノトスル — それらは、どこにあろうが辺に沿う部位とはみなされないことに注意。 ◎ For curved shapes, the bounding box must enclose all portions of the shape along the edge, not just end points. Note that control points for a curve which are not defined as lying along the line of the resulting curve (e.g., the second coordinate pair of a Cubic Bézier command) must not contribute to the dimensions of the bounding box (though those points may fall within the area of the bounding box, if they lie within the shape itself, or along or close to the curve). For example, control points of a curve that are at a further distance than the curve edge, from the non-enclosing side of the curve edge, must be excluded from the bounding box.

`bbox01^dgm

~path "`M20,50 L35,100 H120 V50 Q70,10 20,50^v" は、薄い青で示されている。 左には~pathの正しい~obj限界~box(破線)が示されている。 それは曲線の制御-点(図の上端)は含まないが、青い図形を成すすべてを含むことに注意 — 端点を含む最~小な凸多角形の外側にある部分も含め。 ◎ The path 'M20,50 L35,100 H120 V50 Q70,10 20,50' is shown in light blue. On the left, a correct object bounding box of the path is shown. Note that it does not include the top-most control point of the curve, but it does include all of the blue shape, even the parts that lie outside of the convex hull of the control points.

[ `defs$e 要素の中にある,その他諸々【省略する】 ]に因り,`描画~tree$に含まれない要素にも、限界~boxはある。 要素~上で `getBBox()$n を~callしたときは、要素が描画されたとするときと同じ矩形を返すことになる。 しかしながら,そのような要素は、どの先祖の限界~boxにも寄与しない。 【したがって,そのような要素の子孫も要素の限界~boxには寄与しなくなるので、 “要素が描画されたとするとき” は “要素の子孫を除く要素のみが描画されたとするとき” を意味することになる。】 ◎ Even if an element is not in the rendering tree – due to it being 'display: none', within a ‘defs’ element, not usually rendered like a ‘symbol’ element or not currently present in the document tree – it still has a bounding box. A call to getBBox on the element will return the same rectangle as if the element were rendered. However, an element that is not in the rendering tree does not contribute to the bounding box of any ancestor element.

次の例は、いくつかの要素を定義する。 ~IDを伴う各~要素~用に期待される`~obj限界~box$を下に示す。 ◎ The following example defines a number of elements. The expected object bounding box for each element with an ID is shown below.

<svg xmlns="http://www.w3.org/2000/svg">

  <title>Bounding Box Calculation</title>
  <desc>
要素の限界~boxが、文脈に応じて異なる結果になる例。
◎
Examples of elements with different bounding box results based on context.
</desc>

  <defs id="defs-1">
     <rect id="rect-1" x="20" y="20" width="40" height="40" fill="blue" />
  </defs>

  <g id="group-1">
    <use id="use-1" href="#rect-1" x="10" y="10" />

    <g id="group-2" display="none">
      <rect id="rect-2" x="10" y="10" width="100" height="100" fill="red" />
    </g>
  </g>
</svg>
要素~ID ◎ Element ID 結果の限界~box ◎ Bounding Box Result
`defs-1^l {0, 0, 0, 0}
`rect-1^l {20, 20, 40, 40}
`group-1^l {30, 30, 40, 40}
`use-1^l {30, 30, 40, 40}
`group-2^l {10, 10, 100, 100}
`rect-2^l {10, 10, 100, 100}

`~text内容~要素$用の限界~boxを計算する目的においては、各~glyphは,別々の~graphics要素として扱うモノトスル — すべての~glyphは`全部的~glyph~cell$を占めると見做す下で。 `全部的~glyph~cell@ の~sizeは、次のようになるモノトスル: ◎ For text content elements, for the purposes of the bounding box calculation, each glyph must be treated as a separate graphics element. The calculations must assume that all glyphs occupy the full glyph cell.\

例えば,横書き~text用の計算では、各~glyphは[ 縦方向には、~font用の~ascentから~descentまで全部的に占める ]と見做すモノトスル。 ◎ For example, for horizontal text, the calculations must assume that each glyph extends vertically to the full ascent and descent values for the font.

要素の[ 図形, ~size, 位置 ]は,~animationにより変化し得るので、限界~boxは変異-可能である。 したがって,要素~用の限界~boxは、限界~boxが — ~script~call, [ 宣言的/~linking ]構文の一部として,などにより — 要請された時点のそれを反映するモノトスル。 ◎ Because declarative or scripted animation can change the shape, size, and position of an element, the bounding box is mutable. Thus, the bounding box for an element shall reflect the current values for the element at the snapshot in time at which the bounding box is requested, whether through a script call or as part of a declarative or linking syntax.

要素の横幅や縦幅が 0 であっても(水平または垂直な線や `width$p または `height$p が 0 にされた `rect$e 要素など)、限界~boxはある — ~size 0 にされた寸法は,そのまま 0 にされて。 同様に、 `path$e 要素の下位path区分が[ 横幅, 縦幅 ]とも 0 であっても,その要素の限界~box用の幾何に含めるモノトスル。 ◎ An element which has zero width, zero height, or both (such as a vertical or horizontal line, or a ‘rect’ element with a zero width or height) still has a bounding box, with a positive value for the positive dimension, or with '0' for both the width and height if no positive dimension is specified. Similarly, subpaths segments of a ‘path’ element with zero width and height must be included in that element's geometry for the sake of the bounding box.

位置が指定されていない要素( `path$e 要素のうち `d$p ~propが `none^v にされたものなど)は、限界~boxを計算する目的においては,点 ( 0,0 ) に位置される。 ◎ An element with no position specified (such as a ‘path’ element with a value of none for the d property) is positioned at the point (0,0) for the purposes of calculating a bounding box.

`SVGGraphicsElement$I ~objでない~DOM要素(~gradient要素など)には、限界~boxは無いので,限界~boxを要請する~interfaceも無いことに注意。 ◎ Note that elements whose DOM object does not derive from SVGGraphicsElement (such as gradient elements) do not have a bounding box, and thus have no interface to request a bounding box.

`描画~tree$内にある要素は、未解決な資源を参照するものであっても,その限界~boxは[ 要素の属性に指定された位置と寸法,あるいは属性が給されてなければ その属性~用の`初期~値$ ]により定義されるモノトスル。 例えば,要素 `<use href="#存在しないID" x="10" y="10"/>^c の限界~boxは、 ( x, y ) は ( 10, 10 ), ( 横幅, 縦幅 ) は ( 0, 0 ) になる。 ◎ Elements in the rendering tree which reference unresolved resources shall still have a bounding box, defined by the position and dimensions specified in their attributes, or by the initial value for those attributes if no values are supplied. For example, the element <use href="#bad" x="10" y="10"/> would have a bounding box with an x and y of 10 and a width and height of 0.

次の~algoは、所与の要素~用の`限界~boxを算出する$方法を定義する。 この~algoに対する入力は: ◎ The following algorithm defines how to compute a bounding box for a given element. The inputs to the algorithm are:

`限界~boxを算出する@ ~algoは、 %要素 の型に応じて,次に従う: ◎ The algorithm to compute the bounding box is as follows, depending on the type of element:

`図形~要素$ ◎ a shape
`~text内容~要素$ ◎ a text content element
`~text内容~要素$の中の `a$e 要素 ◎ an ‘a’ element within a text content element
  1. %図形~集合 ~LET 空~集合 ◎ ↓
  2. ~IF[ %fill ~EQ ~T ] ⇒ %図形~集合 に[ 次に与える図形 を %座標~空間 に換算した結果 ]を追加する ⇒# %要素 は`図形~要素$ならば %要素 に`等価な~path$ / ~ELSE_ %要素 の中の~textに対応している 各~glyph~cellをすべて含む図形 ◎ Let box be a rectangle initialized to (0, 0, 0, 0). ◎ Let fill-shape be the equivalent path of element if it is a shape, or a shape that includes each of the glyph cells corresponding to the text within the elements otherwise. ◎ If fill is true, then set box to the tightest rectangle in the coordinate system space that contains fill-shape.

    注記: `fill$p / `fill-opacity$p / `fill-rule$p ~propの値は %~fill図形 には影響しない。 ◎ The values of the fill, fill-opacity and fill-rule properties do not affect fill-shape.

  3. ~IF[ %stroke ~EQ ~T ]~AND[ %要素 の `stroke$p の値 ~NEQ `none^v ] ⇒ %図形~集合 に[ %要素 の ~stroke図形を %座標~空間 に換算した結果 ]を追加する — %要素 には~dash~patternは無いと見做す下で ◎ If stroke is true and the element's stroke is anything other than none, then set box to be the union of box and the tightest rectangle in coordinate system space that contains the stroke shape of the element, with the assumption that the element has no dash pattern.

    注記: [ `stroke-opacity$p / `stroke-dasharray$p / `stroke-dashoffset$p ]の値は、~stroke図形の計算には影響しない。 ◎ The values of the stroke-opacity, stroke-dasharray and stroke-dashoffset do not affect the calculation of the stroke shape.

  4. ~IF[ %markers ~EQ ~T ]: ◎ If markers is true, then\

    1. %要素 上に描画された ~EACH( %marker ) に対し: ◎ for each marker marker rendered on the element:

      1. %~marker要素 ~LET %marker を定義する `marker$e 要素 ◎ ↓
      2. %~marker要素 の ~EACH( 子孫 %子孫 ) に対し: ◎ For each descendant graphics element child of the ‘marker’ element that defines marker's content:

        1. ~IF[ 次がすべて満たされる ]…:

          • %marker の内容を定義する`~graphics要素$である
          • 次をすべて満たす要素は無い ⇒ [ %~marker要素 の子孫である ]~AND[ %子孫 の先祖である ]~AND[ `display^p は `none^v にされている ]
          • %子孫 は `条件付き処理~属性$により除外されていない
          • %子孫 は[ `a$e / `g$e / `svg$e / `switch$e ]要素である

          …ならば ⇒ %図形~集合 に次の結果を追加する ⇒ `限界~boxを算出する$( %子孫, %座標~空間, ~T, %stroke, %markers, %clipped )

          ◎ If child has an ancestor element within the ‘marker’ that is 'display: none', has a failing conditional processing attribute, or is not an ‘a’, ‘g’, ‘svg’ or ‘switch’ element, then continue to the next descendant graphics element. ◎ Otherwise, set box to be the union of box and the result of invoking the algorithm to compute a bounding box with child as the element, space as the target coordinate space, true for fill, stroke and markers, and clipped for clipped.
  5. %~box ~LET [ %図形~集合 は空でないならば %図形~集合 を成すすべての図形の和領域を包含する最も狭い矩形 / ~ELSE_ 矩形( 0, 0, 0, 0 ) ] ◎ ↑
  6. ~IF[ %clipped ~EQ ~T ]~AND[ %要素 上の `clip-path$p の値 ~NEQ `none^v ] ⇒ %~box ~SET %~box と[ 切抜き~pathを %座標~空間 に換算した結果 ]との交差域を包含する最も狭い矩形

    【交差域が無い場合にどうなるのかは、述べられていない。】 【元の図形と切抜き~pathの交差域は空になる場合でも、 %~box は面積 0 にならない場合がある。】 ◎ If clipped is true and the value of clip-path on element is not none, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the clipping path.
  7. ~RET %~box ◎ Return box.
`容器~要素$ ◎ a container element
`use$e
  1. %~box ~LET ( 0, 0, 0, 0 ) に初期化された矩形 ◎ Let box be a rectangle initialized to (0, 0, 0, 0).
  2. %parent ~LET %要素 に応じて ⇒ `容器~要素$ならば %要素 / `use$e 要素ならば `~use要素の~shadow~tree$の根 ◎ Let parent be the container element if it is one, or the root of the ‘use’ element's shadow tree otherwise.
  3. %parent の ~EACH( 子孫 %子孫 ) に対し: ◎ For each descendant graphics element child of parent:

    1. ~IF[ %子孫 は`~graphics要素$でない ]~OR[ %子孫 は 描画されていない ] ⇒ ~CONTINUE ◎ If child is not rendered then continue to the next descendant graphics element.
    2. %~box ~SET %~box と次の結果との和領域 ⇒ `限界~boxを算出する$( %子孫, %座標~空間, %fill, %stroke, %markers, %clipped ) ◎ Otherwise, set box to be the union of box and the result of invoking the algorithm to compute a bounding box with child as the element and the same values for space, fill, stroke, markers and clipped as the corresponding algorithm input values.
  4. ~IF[ %clipped ~EQ ~T ]: ◎ If clipped is true:

    • ~IF[ %要素 上の `clip-path$p ~propの値 ~NEQ `none^v ] ⇒ %~box ~SET %~box と[ `clip-path$p に指定された切抜き~pathを %座標~空間 に換算した結果 ]との交差域を包含する最も狭い矩形 ◎ If the value of clip-path on element is not none, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the clipping path.
    • ~IF[ %要素 は `overflow$p ~propの適用-対象である ]~AND[ %要素 の `overflow$p ~propの値 ~NEQ `visible^v ] ⇒ %~box ~SET %~box と[ %要素 の~overflow限界域を %座標~空間 に換算した結果 ]との交差域を包含する最も狭い矩形 ◎ If the overflow property applies to the element and does not have a value of visible, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the element's overflow bounds.
    • ~IF[ %要素 は `clip$p ~propの適用-対象である ]~AND[ %要素 の `clip$p ~propの値 ~NEQ `auto^v ] ⇒ %~box ~SET %~box と[ `clip$p に指定された矩形を %座標~空間 に換算した結果 ]との交差域を包含する最も狭い矩形 ◎ If the clip property applies to the element and does not have a value of auto, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the rectangle specified by clip.
    【原文は順序付き~listとして~mark-upされていないが、順序も有意になり得る。】
  5. ~RET %~box ◎ Return box.
`foreignObject$e
`image$e
  1. %~box ~LET [ 要素の[ `x^a, `y^a, `width^a, `height^a ]幾何-~propで定義される`位置決め矩形$を %座標~空間 に換算した結果 ]を包含する最も狭い矩形 ◎ Let box be the tightest rectangle in coordinate space space that contains the positioning rectangle defined by the ‘x’, ‘y’, ‘width’ and ‘height’ geometric properties of the element.

    注記: 引数 %fill, %stroke, %markers は、この~algoがこれらの要素~用に返す限界~boxには影響しない。 ◎ The fill, stroke and markers input arguments to this algorithm do not affect the bounding box returned for these elements.

  2. ~IF[ %clipped ~EQ ~T ]~AND[ %要素 上の `clip-path$p の値 ~NEQ `none^v ] ⇒ %~box ~SET %~box と[ 切抜き~pathを %座標~空間 に換算した結果 ]との交差域を包含する最も狭い矩形 ◎ If clipped is true and the value of clip-path on element is not none, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the clipping path.
  3. ~RET %~box を包含する最も狭い矩形 ◎ Return box.

矩形( 0, 0, 0, 0 ) と空~図形との和領域は矩形( 0, 0, 0, 0 ) になる。 ◎ The union box with a value of (0, 0, 0, 0) and an empty shape is box.

%要素 の[ `~obj限界~box$ / `~stroke限界~box$ / `装飾d限界~box$ ]は、次の結果を返す:

  1. %stroke ~LET [[ `~stroke限界~box$ / `装飾d限界~box$ ]に対しては ~T / ~ELSE_ ~F ]
  2. %markers ~LET [ `装飾d限界~box$に対しては ~T / ~ELSE_ ~F ]
  3. ~RET `限界~boxを算出する$( %要素, %要素 の`利用元~座標系$, ~T, %stroke, %markers, ~F )
◎ The object bounding box, stroke bounding box or decorated bounding box of an element is the result of invoking the bounding box computation algorithm above with the following arguments: element is the element itself; space is the element's user coordinate system; fill is true; stroke is true if we are computing the stroke bounding box or decorated bounding box, and false othwerise; markers is true if we are computing the decorated bounding box, and false otherwise; and clipped is false.

8.11. ~obj限界~box単位

次の表の 1 列目に挙げる要素は、座標~値と長さを `~obj限界~box$の割合分として(および, 一部の事例では百分率として)表出する~optionを提供する — 要素~上で[ 同じ行の 2 列目に与える属性 ]を `objectBoundingBox^v に設定することにより: ◎ The following elements offer the option of expressing coordinate values and lengths as fractions (and, in some cases, percentages) of the object bounding box, by setting a specified attribute to 'objectBoundingBox' on the given element:

要素 属性 効果 — 以下における, “適用-先の要素” は、所与の効果が適用される要素を指す
`linearGradient$e `gradientUnits$a ~gradient~vectorを指定する属性( `x1$a, `y1$a, `x2$a, `y2$a )は、~gradientの適用-先の要素の限界~boxの[ 割合分/百分率 ]を表現することを指示する。 ◎ Indicates that the attributes which specify the gradient vector (‘x1’, ‘y1’, ‘x2’, ‘y2’) represent fractions or percentages of the bounding box of the element to which the gradient is applied.
`radialGradient$e `gradientUnits^a 中心( `cx$a, `cy$a ), 半径( `r$a ), 焦点( `fx$a, `fy$a ) を指定する属性は、~gradientの適用-先の要素の限界~boxの[ 割合分/百分率 ]を表現することを指示する。 ◎ Indicates that the attributes which specify the center (‘cx’, ‘cy’), the radius (‘r’) and focus (‘fx’, ‘fy’) represent fractions or percentages of the bounding box of the element to which the gradient is applied.
`pattern$e `patternUnits$a ~patternを敷詰める方法を定義する属性( `x$a, `y$a, `width$a, `height$a )は、~patternの適用-先の要素の限界~boxを利用して確立されることを指示する。 ◎ Indicates that the attributes which define how to tile the pattern (‘x’, ‘y’, ‘width’, ‘height’) are established using the bounding box of the element to which the pattern is applied.
`pattern$e `patternContentUnits$a ~pattern内容~用の利用元~座標系は、~patternの適用-先の要素の限界~boxを利用して確立されることを指示する。 ◎ Indicates that the user coordinate system for the contents of the pattern is established using the bounding box of the element to which the pattern is applied.
`clipPath$e `clipPathUnits$a `clipPath$e 要素の内容~用の利用元~座標系は、切抜き~pathの適用-先の要素の限界~boxを利用して確立されることを指示する。 ◎ Indicates that the user coordinate system for the contents of the ‘clipPath’ element is established using the bounding box of the element to which the clipping path is applied.
`mask$e `maskUnits$aM ~masking領域を定義する属性( `x$aM, `y$aM, `width$aM, `height$aM )は、~maskの適用-先の要素の限界~boxを利用して確立されることを指示する。 ◎ Indicates that the attributes which define the masking region (‘x’, ‘y’, ‘width’, ‘height’) is established using the bounding box of the element to which the mask is applied.
`mask$e `maskContentUnits$aM `mask$e 要素の内容~用の利用元~座標系は、~maskの適用-先の要素の限界~boxを利用して確立されることを指示する。 ◎ Indicates that the user coordinate system for the contents of the ‘mask’ element are established using the bounding box of the element to which the mask is applied.
`filter$e `filterUnits$aF ~filter効果~領域 を定義する属性( `x$aF, `y$aF, `width$aF, `height$aF )は、~filterの適用-先の要素の限界~boxの[ 割合分/百分率 ]を表現することを指示する。 ◎ Indicates that the attributes which define the filter effects region (‘x’, ‘y’, ‘width’, ‘height’) represent fractions or percentages of the bounding box of the element to which the filter is applied.
`filter$e `primitiveUnits$aF 原始filterの中の様々な長さ値は、~filterの適用-先の要素の限界~boxの[ 割合分/百分率 ]を表現することを指示する。 ◎ Indicates that the various length values within the filter primitives represent fractions or percentages of the bounding box of the element to which the filter is applied.

[ ~gradient/~pattern ]用の適用-先の要素は、その[ ~gradient/~pattern ]を[ `fill$p または `stroke$p ]~propにより参照している`~graphics要素$が該当する( ~text要素を~~対象にする特別な規則については、 ~obj限界~box単位と~text要素 の論点を見よ)。 [ 切抜き~path / ~mask / ~filter ]用の適用-先の要素は、[ `容器~要素$, `~graphics要素$ ]のどちらも該当し得る。 ◎ In the discussion that follows, the term applicable element is the element to which the given effect applies. For gradients and patterns, the applicable element is the graphics element which has its fill or stroke property referencing the given gradient or pattern. (For special rules concerning text elements, see the discussion of object bounding box units and text elements.) For clipping paths, masks and filters, the applicable element can be either a container element or a graphics element.

~keyword `objectBoundingBox^v が利用されたときの効果は、[ 入子にされた変形n行列の~list ]に[ 新たな利用元~座標系を作成する,補足的な変形n行列 ]が挿入されたかのようになる: ◎ When keyword objectBoundingBox is used, then the effect is as if a supplemental transformation matrix were inserted into the list of nested transformation matrices to create a new user coordinate system.

[ ~gradient~vector/~pattern~tile/~filter領域/~masking領域 ]を定義する属性に利用された百分率は、対応する割合分(~~比率)と同じ値を表現する(例: `50%^v は `0.5^v と同じを意味する)。 [ `pattern$e / `clipPath$e / `mask$e / `filter$e ]要素の内容に利用された百分率は、[ `単位$secにて定義した,百分率~用の処理~規則 ]に則って扱われる。 ◎ When percentages are used with attributes that define the gradient vector, the pattern tile, the filter region or the masking region, a percentage represents the same value as the corresponding decimal value (e.g., 50% means the same as 0.5). If percentages are used within the content of a ‘pattern’, ‘clipPath’, ‘mask’ or ‘filter’ element, these values are treated according to the processing rules for percentages as defined in Units.

~obj限界~box単位の[ 割合分/百分率 ]として表出される値~用には、どの数量-値も指定できる。 特に,[ 0 〜 1 に入らない割合分/ 0% 〜 100% に入らない百分率 ]も指定できる。 ◎ Any numeric value can be specified for values expressed as a fraction or percentage of object bounding box units. In particular, fractions less are zero or greater than one and percentages less than 0% or greater than 100% can be specified.

~keyword `objectBoundingBox^v は、適用-先の要素の幾何が[ 横幅, 縦幅 ]どちらかが 0 の場合には,利用されるベキでない — 水平または垂直な線の事例など。 ~stroke幅が 0 でないことに因り,そのような線が太さがあるように見えようが、~stroke幅は限界~boxの計算では無視されるので。 そのような適用-先の要素に `objectBoundingBox^v を指定された場合、所与の効果(例:~gradientや~filter)は,無視されることになる。 ◎ Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

8.12. ~SVG内容の内在的~sizing~prop

~CSSで整形された~host文書に~SVGが内包される所では、その`具象-~obj~size$を,`既定の~sizing~algo$ `css-images-3$r を利用して計算するモノトスル — 次の入力を与える下で: ◎ To enable inclusion of SVG in host documents formatted with CSS, a concrete object size must be calculated. The concrete object size must be calculated using the Default Sizing Algorithm defined in CSS Images 3 [css-images-3], with the following inputs:

この節に定義する挙動は,~CSSに特有であるが、他の~host文脈にも転用されてヨイ。 どの~host文脈も、`~SVG表示域$を~sizeするときは,`内在的~縦横比$を — それが可用な所では — 尊重するモノトスル。 ◎ The behaviour defined in this section is specific to CSS, but may be adapted to other host contexts. In all host contexts, the intrinsic aspect ratio, where available, must be respected when sizing the SVG viewport.

例: `Intrinsic Aspect Ratio 1^xl ◎ Examples: ◎ Example: Intrinsic Aspect Ratio 1

<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" height="5cm">
  ...
</svg>

この例では、`~SVG表示域$の内在的[ 縦横比は 2:1, 横幅は 10cm, 縦幅は 5cm ]になる。 ◎ In this example the intrinsic aspect ratio of the SVG viewport is 2:1. The intrinsic width is 10cm and the intrinsic height is 5cm.

例 `Intrinsic Aspect Ratio 2^xl ◎ Example: Intrinsic Aspect Ratio 2

<svg xmlns="http://www.w3.org/2000/svg"
     width="100%" height="50%" viewBox="0 0 200 200">
  ...
</svg>

この例では、最外縁の`~SVG表示域$の内在的~縦横比は 1:1 になる。 この事例における縦横比の計算は、[ 1 方向のみに拘束される~objを包含塊の中に埋込む ]ことを許容する。 ◎ In this example the intrinsic aspect ratio of the outermost SVG viewport is 1:1. An aspect ratio calculation in this case allows embedding in an object within a containing block that is only constrained in one direction.

例: `Intrinsic Aspect Ratio 3^xl ◎ Example: Intrinsic Aspect Ratio 3

<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" viewBox="0 0 200 200">
  ...
</svg>

この事例では、内在的~縦横比は 1:1 になる。 ◎ In this case the intrinsic aspect ratio is 1:1.

例: `Intrinsic Aspect Ratio 4^xl ◎ Example: Intrinsic Aspect Ratio 4

<svg xmlns="http://www.w3.org/2000/svg"
     width="75%" height="10cm" viewBox="0 0 200 200">
  ...
</svg>

この例では、内在的~縦横比は 1:1 になる。 ◎ In this example, the intrinsic aspect ratio is 1:1.

新たな `auto^v 値~用にもっと例を追加するか? 例: `David Vest^en 氏が供された いくつかの例 など。 ◎ Add more examples for the new auto value? E.g some of the examples provided by David Vest.

8.13. ~vector効果

~SVG-2 要件: ~SVG-2は SVG 1.2 Tiny に基づく拘束付きの変形nを備える( `http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Input#Constrained_Transformations$refer )。 ◎ SVG 2 Requirement: SVG 2 will have constrained transformations based on SVG 1.2 Tiny.

  • 解決: ~SVG 2仕様に~vector効果~拡張~提案を追加する( `http://www.w3.org/2014/04/09-svg-minutes.html#item06$refer )。 ◎ Resolution: Add vector effects extension proposal to SVG 2 specification.
  • 目的: ~non-scaling特能を含める(~objの~non-scaling部分, ~non-scaling~obj全体) ◎ Purpose: To include non-scaling features (non-scaling part of the object, and non-scaling entire object
  • `Owner: Satoru Takagi^en ( `3619$ACTION )

ときには、~objに変形が適用されようが,~objの[ 外形線の横幅を保つ / 元の位置を固定する ]ことが関心事になる。 例えば、ある地図において 2px 幅の線は道路を表現していて,利用者が地図の中へ~zoomしたときも道路の 2px 幅を保つことや、~graphic図表~上の紹介文~内で【他は動かさずに】~panするのをアリにすることなど。 ◎ Sometimes it is of interest to let the outline of an object keep its original width or to let the position of an object fix no matter which transforms are applied to it. For example, in a map with a 2px wide line representing roads it is of interest to keep the roads 2px wide even when the user zooms into the map, or introductory notes on the graphic chart in which panning is possible.

そのような効果を[ 特別な座標~変形nと, ~graphic絵図 ]に関して提供するため、 SVG Tiny 1.2 は `vector-effect$p ~propを導入した。 SVG Tiny 1.2 は、 `non-scaling-stroke^v の挙動のみを導入したが、この~versionでは,いくつかの効果も追加的に導入する。 さらには、これらの効果は組合nでも指定できるので,より多様な効果を示す。 ~SVG言語の将来~versionは、この~propを通して,より強力な~vector効果を許容することになる。 ◎ To offer such effects regarding special coordinate transformations and graphic drawings, SVG Tiny 1.2 introduced the vector-effect property. Although SVG Tiny 1.2 introduced only non-scaling stroke behavior, this version introduces a number of additional effects. Furthermore, since these effects can be specified in combination, they show more various effects. And, future versions of the SVG language will allow for more powerful vector effects through this property.

`vector-effect$p 用の[ `non-scaling-stroke^v, `none^v ]以外の値は、実装の欠如に因り~SVG-2から落とされる~risk下にある。 それらを現在~指定されるものとして実装するときの実用性に関して,実装~期間にて実装者からの~feedbackが要請される。 ◎ Values of vector-effect other than non-scaling-stroke and none are at risk of being dropped from SVG 2 due to a lack of implementations. Feedback from implementers is requested, regarding the practicality of implementing them as currently specified, during the implementation period.

◎名 `vector-effect@p ◎値 `none^v | `non-scaling-stroke^v | [ `non-scaling-size^v || `non-rotation^v || `fixed-position^v ] ◎初 `none^v ◎適 `~graphics要素$, `use$e 要素 ◎継 されない ◎百 受容しない ◎算 指定d値 ◎ア 離散的 ◎表終

【 原文による値の構文は,以下の記述と整合していないので、この訳では修正している。 】

`none^v
~vector効果は適用しないものと指定する。 すなわち、~SVG-11による既定の描画の挙動 — 先ず図形の幾何を指定した塗りで~fillしてから,指定した塗りで外形線を~strokeする — を利用する。 ◎ Specifies that no vector effect shall be applied, i.e. the default rendering behaviour from SVG 1.1 is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint.
`non-scaling-stroke^v
塗ngに対する~vector効果の この記述を見よ。 【~stroke幅は、~CTMが変化しようが変化しない。】 ◎ Please refer to this description of vector effect on painting.
`non-scaling-size^v
次の特徴を備える拘束付き変形nにより,[ この要素とその子孫 ]に向けて,特別な`利用元~座標系$を指定する。 `利用元~座標系$の拡縮率は、`~host座標~空間$からの`~CTM$が変化しようが変化しない。 しかしながら,[ 回転/斜傾 ]の抑止は指定しない。 また、`利用元~座標系$の配置の固定化も指定しない。 `non-scaling-size^v は,`利用元~座標系$の拡縮を抑止するので、 `non-scaling-stroke^v の特徴も備える。 次節にて,変形n公式と挙動の例を指示する。 ◎ Specifies special user coordinate system toward this element and its descendant by constrained transformations with the following characteristics. The scale of the user coordinate system do not change in spite of change of CTMs from a host coordinate space. However, it does not specify the suppression of rotation and skew. Also, it does not specify the fixation of placement of user coordinate system. Since non-scaling-size suppresses scaling of user coordinate system, it also has the characteristic of non-scaling-stroke. The transformation formula and the example behavior are indicated to the following chapter.
`non-rotation^v
次の特徴を備える拘束付き変形nにより,[ この要素とその子孫 ]に向けて,特別な`利用元~座標系$を指定する。 `利用元~座標系$の[ 回転/斜傾 ]は、`~host座標~空間$からの`~CTM$が変化しようが抑止される。 しかしながら,拡縮の抑止は指定しない。 また、`利用元~座標系$の配置の固定化も指定しない。 次節にて,変形n公式と挙動の例を指示する。 ◎ Specifies special user coordinate system toward this element and its descendant by constrained transformations with the following characteristics. The rotation and skew of the user coordinate system is suppressd in spite of change of CTMs from a host coordinate space. However, it does not specify the suppression of scaling. Also, it does not specify the fixation of placement of user coordinate system. The transformation formula and the example behavior are indicated to the following chapter.
`fixed-position^v
次の特徴を備える拘束付き変形nにより,[ この要素とその子孫 ]に向けて,特別な`利用元~座標系$を指定する。 `利用元~座標系$の配置は、`~host座標~空間$からの`~CTM$が変化しようが固定される。 しかしながら,[ 回転/斜傾/拡縮 ]の抑止は指定しない。 要素に `fixed-position^v 効果がある下で `transform$p ~propもある場合、その~propは,この効果~用に消費される。 `transform$p ~propが表す行列の並進~成分[ %e, %f ]は、固定された`利用元~座標系$の原点を転送するために利用される。 次節にて,変形n公式と挙動の例を指示する。 ◎ Specifies special user coordinate system toward this element and its descendant by constrained transformations with the following characteristics. The placement of user coordinate system is fixed in spite of change of CTMs from a host coordinate space. However, it does not specify the suppression of rotation, skew and scaling. When the element that has fixed-position effect and also has transform property, that property is consumed for this effect. The shift components e and f of matrix of transform property are used to transfer the origin of fixed user coordinate system. The transformation formula and the example behavior are indicated to the following chapter.

これらの値は併用でき、それにより,それぞれの特徴を同時に備える効果を指定できる。 ◎ These values can be enumerated. Thereby, the effect which has these characteristics simultaneously can be specified.

`vector-effect$p 用の `~host座標~空間@ は、`最も遠い先祖の~SVG表示域$の`表示域~座標系$である。 ◎ The host coordinate space for vector-effect is the viewport coordinate system of the furthest ancestral SVG viewport.

注記: ~SVGの将来~versionは、機器~座標系を指定する仕方を許容し得る。 ◎ Note: Future versions of SVG may allow ways to specify the device coordinate system.

8.13.1. ~vector効果の算出-法

この節では,~vector効果の挙動を明確化するため、各種 値の組合nに関して,一連の変形n公式を示す — ただし、明瞭な含意がある `non-scaling-stroke^v は除く。 ◎ This section shows the list of transformation formulas regarding combinations of the values for clarification of the behavior of vector effects excluding non-scaling-stroke which has clear implications.

`~3D描画~文脈$内で遂行される変形nに対しては、 `vector-effect$p ~propによる効果は無い。 ◎ The vector-effect property has no effect on transformations performed in a 3d rendering context.

以下に与える公式の中では、所与の座標 %P ~EQ ( %x, %y ) は,次のように z 座標が 1 にされた ~3D縦~vector( 1 × 3 行列 )を表すと解釈するものとする:

%P ~EQ `Vxy^dgm

`利用元~座標系$から`表示域~座標系$への通常の変形nは、次の公式に従う:

%V ~EQ %~CTM ~DOT %U

ここで、 %U は 利用元~座標, %V は 表示域~座標, %~CTM は 前者の座標系から後者の座標系への`~CTM$を与える:

%~CTM ~EQ `CTM^dgm
◎ The normal coordinate transformation formula from user coordinate system to viewport coordinate system is as follows.

`vector-effect$p が次の様に要素に追加されたとき: ◎ ↓

<circle vector-effect="%値" transform="translate(%e %f)" cx="%Ux" cy="%Ux" r=".."/>

変形n公式は、以下に従うように変化する — 以下では、次の表記が用いられる:

  • %d は、[ %~CTM の行列式( ~EQ %a ~MUL %d ~MINUS %b ~MUL %c ) ]の絶対~値の平方根
  • %I0 は、次に与える 3 次~行列:

    %I0 ~EQ `ident^dgm
  • 座標 %T ~EQ ( %e, %f ) は、要素~上の `transform$p 属性に与えられた変形n行列の ( %e, %f ) 成分
  • 座標 %O は、原点 ( 0, 0 )
◎ When the vector-effect is added to an element like the above, the transformation formula for user coordinate to the device coordinate changes as follows. Here, xf and yf are user coordinate of the corresponding element and its descendant. And, xo and yo are matrix element e and f of the transform attribute which the corresponding element has. In addition, |det(CTM)| is absolute value of the determinants of CTM.\

%d ~EQ 0 , かつ `non-scaling-size^v が値に含まれる場合、 `vector-effect$p は無効に,すなわち `none^v になる。 ◎ When this value becomes 0 and non-scaling-size is appointed, vector-effect becomes invalidity namely none.

他の場合の変形n公式は、 `vector-effect$p の値に応じて: ◎ veValue|Formula

`non-scaling-size^v
%V ~EQ %~CTM ~DOT %O ~PLUS ( 1 ~DIV %d ) ~MUL %~CTM ~DOT %I0 ~DOT %U
`non-rotation^v
%V ~EQ %~CTM ~DOT %O ~PLUS %d ~MUL %I0 ~DOT %U
`non-scaling-size^v `non-rotation^v
%V ~EQ %~CTM ~DOT %O ~PLUS %I0 ~DOT %U
`fixed-position^v
%V ~EQ %T ~PLUS %~CTM ~DOT %I0 ~DOT %U
`fixed-position^v `non-scaling-size^v
%V ~EQ %T ~PLUS ( 1 ~DIV %d ) ~MUL %~CTM ~DOT %I0 ~DOT %U
`fixed-position^v `non-rotation^v
%V ~EQ %T ~PLUS %d ~MUL %I0 ~DOT %U
`fixed-position^v `non-scaling-size^v `non-rotation^v
%V ~EQ %T ~PLUS %d ~MUL %I0 ~DOT %U

8.13.2. 入子にされた表示域~座標系~用の~vector効果の算出-法

【この節は未訳( `vector-effect$p 用の追加的な値 `viewport^v, `screen^v に関する記述)。】

8.13.3. ~vector効果の例

`vector-effect$p `non-scaling-stroke^v による例: ◎ Below is an example of the non-scaling-stroke vector-effect.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="6cm" height="4cm" viewBox="0 0 600 400" 
     viewport-fill="rgb(255,150,200)">

  <desc>
`non-scaling-stroke^v の例
◎
Example non-scaling stroke
</desc>
  <rect x="1" y="1" width="598" height="398" fill="none" stroke="black"/>
  
  <g transform="scale(9,1)">
    <line stroke="black" stroke-width="5" x1="10" y1="50" x2="10" y2="350"/>
    <line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5" 
        x1="32" y1="50" x2="32" y2="350"/>
    <line vector-effect="none" stroke="black" stroke-width="5" 
        x1="55" y1="50" x2="55" y2="350"/>
  </g>

</svg>

`non-scaling-stroke^v 以外の各種~vector効果, それらの組合nによる例を以下に示す。 先ず、これらに利用される~SVG~source~codeは: ◎ Below is an example of the none vector-effect (no vector effect). ◎ Before changing CTM ◎ After changing CTM ◎ Source code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="500" width="500">

  <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"/>

  <!-- 
入子にされた利用元~座標系は、この `transform$p 属性により変形される
◎
Nested user coordinate system is transformed by this transform attribute
 -->
  <g transform="matrix(2.117,0.3576,-0.3576,1.47,0,0) translate(-50,-50)">
    <svg viewBox="-50,-50,500,500" height="500" width="500">
      <!-- 
比較用の~~基準~格子を示す,この `svg^e の利用元~座標系~上の~graph-paper
◎
Graph paper on the this svg's base user coordinate system
 -->
      <g stroke="green" stroke-width="1" fill="none">
        <!-- 順に:
~x軸, ~y軸,
座標系の原点を示す緑の小円,
~x軸の向きを示す緑の矢印,
格子の罫線
 -->
        <path d="M-100,000 h500 M000,-100 v500 "/>
        <circle cx="0" cy="0" r="10"/>
        <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"/>
        <path stroke-dasharray="5,5" d="
M-100,100 h500
M-100,200 h500
M-100,300 h500
M-100,400 h500
M-100,500 h500
M100,-100 v500
M200,-100 v500
M300,-100 v500
M400,-100 v500
M500,-100 v500"/>
      </g>
        <!-- 
各種~vector効果を適用する赤い矢印の~~基準~格子における原点を示す緑の小円
 -->
        <circle cx="150" cy="150" r="7"/>

      <!-- 
~vector効果を備える図
◎
Figure having vector effect
 -->
      <!-- 
太く赤い右向き矢印と, その原点に置かれた小さな四角
◎
A thick red right arrow and small rectangle on this figure's nested user coordinate system origin
 -->
      <path
            id="ve"
            vector-effect="…"
            stroke="red" stroke-width="3" fill="none"
            transform="translate(150,150)"
            d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>
    </svg>
  </g>
</svg>

上の `vector-effect="…"^a に各種~値をあてがった場合の効果を以下に示す:

~CTMが変更される前 ~CTMが変更された後
`none^v (~vector効果なし) `ve-initial-1^dgm `ve-none^dgm
`non-scaling-size^v ◎ Below is an example of the non-scaling-size. ◎ Before changing CTM After changing CTM `ve-initial-2^dgm `ve-nonScalingSize^dgm
`non-rotation^v ◎ Below is an example of the non-rotation. ◎ Before changing CTM After changing CTM `ve-initial-3^dgm `ve-nonRotation^dgm
`non-scaling-size non-rotation^v ◎ Below is an example of the non-scaling-size non-rotation. ◎ Before changing CTM After changing CTM `ve-initial-4^dgm `ve-nonScalingSize-nonRotation^dgm
`fixed-position^v ◎ Below is an example of the fixed-position. ◎ Before changing CTM After changing CTM `ve-initial-5^dgm `ve-fixedPosition^dgm
`non-scaling-size fixed-position^v ◎ Below is an example of the non-scaling-size fixed-position. ◎ Before changing CTM After changing CTM `ve-initial-6^dgm `ve-nonScalingSize-fixedPosition^dgm
`non-rotation fixed-position^v ◎ Below is an example of the non-rotation fixed-position. ◎ Before changing CTM After changing CTM `ve-initial-7^dgm `ve-nonRotation-fixedPosition^dgm
`non-scaling-size non-rotation fixed-position^v ◎ Below is an example of the non-scaling-size non-rotation fixed-position. ◎ Before changing CTM After changing CTM `ve-initial-8^dgm `ve-nonScalingSize-nonRotation-fixedPosition^dgm

8.14. ~DOM~interface

8.14.1. ~interface `SVGTransform^I0

`SVGTransform$I ~interfaceは、 `transform$p ~prop, それ用の呈示~属性[ `transform^a / `gradientTransform$a / `patternTransform$a ]に現れる `transform-function$t 値を表現するために利用される。 `SVGTransform$I は、変形~list内の単独の成分 — `scale(…)^v や `matrix(…)^v 値など — を表現する。 ◎ The SVGTransform interface is used to represent <transform-function> values that appear in the transform property and its presentation attributes ‘transform’, ‘gradientTransform’ and ‘patternTransform’. An SVGTransform represents a single component in a transform list, such as a single scale(…) or matrix(…) value. ◎ (読専 flag に集約) An SVGTransform object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below. ◎ (反映を継承する/関連な要素に集約) An SVGTransform object can be associated with a particular element. The associated element is used to determine which element's ‘transform’ presentation attribute to update if the object reflects that attribute. Unless otherwise described, an SVGTransform object is not associated with any element. ◎ Every SVGTransform object operates in one of two modes. It can: • reflect an element of a presentation attribute value (being exposed through the methods on the baseVal member of an SVGAnimatedTransformList), • be detached, which is the case for SVGTransform objects created with createSVGTransform and createSVGTransformFromMatrix.

【!id=ReadOnlyTransform/TransformAssociatedElement】

各 `SVGTransform$I ~objは、次のものを内部的に保守する:

`値@tF
`transform-function$t 値。
`行列~obj@
`DOMMatrix$I ~obj。 これは、 `matrix$m ~IDL属性から返され,常に~objの`値$tFに同期するよう保たれる。
◎ An SVGTransform object maintains an internal <transform-function> value, which is called its value. It also maintains a DOMMatrix object, which is called its matrix object, which is the object returned from the matrix IDL attribute. An SVGTransform object's matrix object is always kept synchronized with its value.
[Exposed=Window]
interface SVGTransform {

  // Transform Types
  const unsigned short `SVG_TRANSFORM_UNKNOWN$m = 0;
  const unsigned short `SVG_TRANSFORM_MATRIX$m = 1;
  const unsigned short `SVG_TRANSFORM_TRANSLATE$m = 2;
  const unsigned short `SVG_TRANSFORM_SCALE$m = 3;
  const unsigned short `SVG_TRANSFORM_ROTATE$m = 4;
  const unsigned short `SVG_TRANSFORM_SKEWX$m = 5;
  const unsigned short `SVG_TRANSFORM_SKEWY$m = 6;

  readonly attribute unsigned short `type$m;
  [SameObject] readonly attribute `DOMMatrix$I `matrix$m;
  readonly attribute float `angle$m;

  void `setMatrix$m(optional `DOMMatrix2DInit$I %matrix);
  void `setTranslate$m(float %tx, float %ty);
  void `setScale$m(float %sx, float %sy);
  void `setRotate$m(float %angle, float %cx, float %cy);
  void `setSkewX$m(float %angle);
  void `setSkewY$m(float %angle);
};

`SVGTransform$I 上に定義された数量-変形~種別~定数は、 `SVGTransform$I `値$tFの種別を表現するために利用される。 それらの意味は、次に従う: ◎ The numeric transform type constants defined on SVGTransform are used to represent the type of an SVGTransform's value. Their meanings are as follows:

変形~種別~定数~表
定数 意味
`SVG_TRANSFORM_MATRIX@m `matrix(…)^v 値
`SVG_TRANSFORM_TRANSLATE@m `translate(…)^v 値
`SVG_TRANSFORM_SCALE@m `scale(…)^v 値
`SVG_TRANSFORM_ROTATE@m `rotate(…)^v 値
`SVG_TRANSFORM_SKEWX@m `skewX(…)^v 値
`SVG_TRANSFORM_SKEWY@m `skewY(…)^v 値
`SVG_TRANSFORM_UNKNOWN@m その他の種別を表す値

注記: 数量-変形~種別~定数の利用-は~anti-patternであり、上に挙げたもの以外の `SVGTransform$I が~supportする変形~種別~用には,新たな定数~値は導入されない。 そのような変形~種別には、種別 `SVG_TRANSFORM_UNKNOWN$m が利用される。 `SVGTransform$I の他の~propが,これらの種別の変形とどう演算するかの詳細は下を見よ。 ◎ The use of numeric transform type constants is an anti-pattern and new constant values will not be introduced for any transform types supported by SVGTransform. If other types of transforms are supported and used, the SVGTransform uses the SVG_TRANSFORM_UNKNOWN type. See below for details on how the other properties of an SVGTransform operate with these types of transforms.

`type@m
`SVGTransform$I の`値$tFである変形~itemの種別を表現する。 ◎ The type IDL attribute represents the type of transform item that the SVGTransform's value is.\

取得子は、次を走らす: ◎ On getting type, the following steps are run:

  1. ~IF[ 此れの`値$tFは[ `matrix(…)^v / `translate(…)^v / `scale(…)^v / `rotate(…)^v / `skewX(…)^v / `skewY(…)^v ]関数である ] ⇒ ~RET 上の変形~種別~表における対応する定数~値 ◎ If the SVGTransform's value is a matrix(…), translate(…), scale(…), rotate(…), skewX(…) or skewY(…) function, then return the corresponding constant value from the transform type table above.
  2. ~ELSE ⇒ ~RET `SVG_TRANSFORM_UNKNOWN$m ◎ Otherwise, return SVG_TRANSFORM_UNKNOWN.

    注記: 例えば,[ `scaleX(…)^v / `translate3d(…)^v ]変形~用には、 `SVG_TRANSFORM_UNKNOWN$m 返すことになる。 ◎ For example, for a scaleX(…) or translate3d(…) transform, SVG_TRANSFORM_UNKNOWN would be returned.

`matrix@m
変形を 4×4 斉次~行列として表現する。 ◎ The matrix IDL attribute represents the transform as a 4x4 homogeneous matrix, and\
取得子は、此れの`行列~obj$を返す。 ◎ on getting returns the SVGTransform's matrix object.\
`行列~obj$を最初に作成したときは、各~成分を此れの`値$tF(変形~関数)に合致するように設定するものとする。 【!and is set to reflects the SVGTransform】 ◎ When the matrix object is first created, its values are set to match the SVGTransform's transform function value, and is set to reflects the SVGTransform.
注記: 各 変形~関数の種別が,どの行列~値に対応するかの記述は CSS Transforms 仕様を見よ。 ◎ See the CSS Transforms specification for a description of how the different transform function types correspond to particular matrix values.
`angle@m
[ `rotate(…)^v / `skewX(…)^v / `skewY(…)^v ]変形~関数の `angle$t ~parameterを表現する。 ◎ The angle IDL attribute represents the angle parameter of a rotate(…), skewX(…) or skewY(…) transform function.\

取得子は、次を走らす: ◎ On getting, the following steps are run:

  1. ~IF[ 此れの`値$tFは[ `rotate(…)^v / `skewX(…)^v / `skewY(…)^v ]関数である ] ⇒ ~RET 関数の `angle$t 引数を `deg$u 単位に~~換算した結果 ◎ If the SVGTransform object's value is a rotate(…), skewX(…) or skewY(…) function, return its angle argument in degrees.
  2. ~RET 0 ◎ Otherwise, return 0.
`setMatrix(matrix)@m
`SVGTransform$I の行列を所与の行列~値に設定するために利用される。 ◎ The setMatrix method is used to set the SVGTransform to a given matrix value.\

被呼出時には、次を走らす: ◎ When setMatrix(matrix) is called, the following steps are run:

  1. ~IF[ 此れの`読専~flag$ ~EQ ~T ] ⇒ ~THROW `NoModificationAllowedError$E ◎ If the SVGTransform object is read only, then throw a NoModificationAllowedError.
  2. %新-行列 ~LET `辞書から行列を作成する$( %matrix, `DOMMatrixReadOnly$I ) (例外が投出され得る) ◎ Let newMatrix be the result of DOMMatrixReadOnly.fromMatrix(matrix), including the validate and fix-up steps for missing values. If that method throws an error, then re-throw that error and abort these steps.
  3. 此れの`行列~obj$を成す各~成分を %新-行列 内の対応する成分~値に設定する ◎ ↓
  4. 此れの`行列~obj$の`~is2D$ ~SET %新-行列 の`~is2D$ ◎ ↓
  5. `変形の値を行列に同期する$( 此れ ) ◎ If newMatrix.is2D() would return true, then set the SVGTransform object's value to a matrix(…) value that represents the same matrix as newMatrix. ◎ Otherwise, set the SVGTransform object's value to a matrix3d(…) value that represents the same matrix as newMatrix. ◎ In either case, matrix object gets synchronized to the SVGTransform object's value.
  6. `必要なら内容~属性を直列化し直す$( 此れ ) ◎ If the SVGTransform object reflects a presentation attribute value of an element, then reserialize the reflected attribute.
`setTranslate()@m
`setScale()@m
`setRotate()@m
`setSkewX()@m
`setSkewY()@m
これらは、 `SVGTransform$I を新たな変形~関数~値に設定するために利用される。 ◎ The setTranslate, setScale, setRotate, setSkewX and setSkewY methods are used to set the SVGTransform to a new transform function value.\

被呼出時には、次を走らす: ◎ When one of these methods is called, the following steps are run:

  1. ~IF[ 此れの`読専~flag$ ~EQ ~T ] ⇒ ~THROW `NoModificationAllowedError$E ◎ If the SVGTransform object is read only, then throw a NoModificationAllowedError.
  2. 此れの`値$tF ~SET どの~methodが~callされたかに応じて,次の表に与える新たな変形~関数~値: ◎ Set the SVGTransform object's value to a new transform function value, depending on which method was called:

    ~method 変形~関数
    `setTranslate(tx, ty)^m translate(%tx, %ty) ◎ the new transform function value is translate(tx, ty)
    `setScale(sx, sy)^m scale(%sx, %sy) ◎ the new transform function value is scale(sx, sy)
    `setRotate(angle, cx, cy)^m rotate(%angle, %cx, %cy) ◎ the new transform function value is rotate(angle, cx, cy)
    `setSkewX(angle)^m skewX(%angle) ◎ the new transform function value is skewX(angle)
    `setSkewY(angle)^m skewY(%angle) ◎ the new transform function value is skewY(angle)
  3. 此れの`行列~obj$の各~成分を此れの`値$tFに合致するように設定する ◎ Set the components of the SVGTransform object's matrix object to match the new transform function value.
  4. `必要なら内容~属性を直列化し直す$( 此れ ) ◎ If the SVGTransform object reflects an element of a presentation attribute value, then reserialize the reflected attribute.

この仕様は、 `DOMMatrix$I ~objのうち,ある `SVGTransform$I ~obj %T の`行列~obj$ %M であるものの挙動に対し, `geometry-1$r 仕様に述べられるものを超える追加的な要件を課す — それらを,変形~値をとる呈示~属性を反映するために利用できるよう: ◎ This specification imposes additional requirements on the behavior of DOMMatrix objects beyond those described in the Geometry Interfaces specification, so that they can be used to reflect presentation attributes that take transform values. ◎ (反映を継承する/関連な要素に集約) Every DOMMatrix object operates in one of two modes. It can: • reflect an SVGTransform (being exposed through the matrix IDL attribute on an SVGTransform), or • be detached, which is the case for DOMMatrix objects created using their constructor or with createSVGMatrix.

  • [ %T の`読専~flag$ ~EQ ~T ]ならば、 %M を改変しようとするどの試み — ~objの[ ~IDL属性に値をアテガう/変異-可能な変形~methodを呼出す ]など — に対しても,内部的な値を更新することなく `NoModificationAllowedError$E 例外を投出するモノトスル。 ◎ (SVGTransform の読専 flag に集約) A DOMMatrix can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. When assigning to any of a read only DOMMatrix's IDL attributes, or when invoking any of its mutable transform methods, a NoModificationAllowedError exception will be thrown instead of updating the internal value.

    注記: `DOMMatrixReadOnly$I ~interfaceは、 `transform$p を反映するために利用されない。 それらは元から読専なので,改変しようとするどの試みに対しても例外を投出する。 ◎ Note that this applies only to the read-write DOMMatrix interface; the DOMMatrixReadOnly interface, which is not used for reflecting transform, will already throw an exception if an attempt is made to modify it.

  • %M の[ ~IDL属性に値をアテガう/変異-可能な変形~methodを呼出す ]ことにより、内部的な行列~値が更新されたときは,次の手続きを走らす: ◎ When assigning to any of a writable DOMMatrix's IDL attributes, or when invoking any of its mutable transform methods, the following steps are run after updating the internal matrix value: ◎ If the DOMMatrix reflects an SVGTransform, then:

    1. ~Assert: %T の`読専~flag$ ~EQ ~F
    2. `変形の値を行列に同期する$( %T ) ◎ If the DOMMatrix would return true from its is2d method, then set the SVGTransform object's value to a matrix(…) value that represents the same matrix as the DOMMatrix. ◎ Otherwise, set the SVGTransform object's value to a matrix3d(…) value that represents the same matrix as the DOMMatrix.
    3. `必要なら内容~属性を直列化し直す$( %T ) ◎ If the SVGTransform object reflects an element of a presentation attribute value, then reserialize the reflected attribute.

`変形の値を行列に同期する@ ときは、所与の ( `SVGTransform$I ~obj %T ) に対し,次を走らす ⇒ %T の`値$tF ~SET %M の`~is2D$ に応じて ⇒# ~T ならば %T の`行列~obj$と同じ行列を表現する `matrix(…)^v 値/ ~F ならば %T の`行列~obj$と同じ行列を表現する `matrix3d(…)^v 値

【 この手続きは、他所を簡潔に記すため,この訳に導入している。 】

8.14.2. ~interface `SVGTransformList^I0

`SVGTransformList$I ~interfaceは、 0 個以上の `SVGTransform$I ~objからなる`~list~interface$である。 `SVGTransformList$I ~objは、 `transform$p ~propがとり得る値 — すなわち, `transform-list$t または~keyword `none^v — を表現する。 ◎ The SVGTransformList interface is a list interface whose elements are SVGTransform objects. An SVGTransformList represents a value that the transform property can take, namely either a <transform-list> or the keyword none.

[Exposed=Window]
interface `SVGTransformList^dfn {
  readonly attribute unsigned long `length$m1;
  readonly attribute unsigned long `numberOfItems$m1;

  void `clear$m1();
  `SVGTransform$I `initialize$m1(`SVGTransform$I %newItem);
  getter `SVGTransform$I `getItem$m1(unsigned long %index);
  `SVGTransform$I `insertItemBefore$m1(`SVGTransform$I %newItem, unsigned long %index);
  `SVGTransform$I `replaceItem$m1(`SVGTransform$I %newItem, unsigned long %index);
  `SVGTransform$I `removeItem$m1(unsigned long %index);
  `SVGTransform$I `appendItem$m1(`SVGTransform$I %newItem);
  `setter$m1 void (unsigned long %index, `SVGTransform$I %newItem);

  /* 
他の~list~interfaceに共通しない追加的な~method
◎
Additional methods not common to other list interfaces.
 */
  `SVGTransform$I `createSVGTransformFromMatrix$m(optional `DOMMatrix2DInit$I %matrix);
  `SVGTransform$I? `consolidate$m();
};
`createSVGTransformFromMatrix(matrix)@m
行列~objから新たな `SVGTransform$I ~objを作成するために利用される。 ◎ The createSVGTransformFromMatrix method is used to create a new SVGTransform object from a matrix object.\

被呼出時には、次を走らす: ◎ When the createSVGTransformFromMatrix(matrix) method is called, the following steps are run:

  1. %transform ~LET 新たな `SVGTransform$I1 ~obj【!detached: 関連な要素 ~EQ ε】 ◎ Let transform be a newly created SVGTransform object that is detached.
  2. %transform 上の `setMatrix()$m1 ~methodの手続きを,引数 %matrix を渡して走らす ◎ Follow the steps that would be run if the setMatrix method on transform were called, passing matrix as its argument.
  3. ~RET %transform ◎ Return transform.
`consolidate()@m
変形~listを[ 単独の変形~関数を利用している等価な変形n ]へ変換する。 ◎ The consolidate method is used to convert the transform list into an equivalent transformation using a single transform function.\

被呼出時には、次を走らす: ◎ When the consolidate() method is called, the following steps are run:

  1. ~IF[ 此れの`読専~flag$ ~EQ ~T ] ⇒ ~THROW `NoModificationAllowedError$E ◎ If the SVGTransformList object is read only, then throw a NoModificationAllowedError.
  2. %~list ~LET 此れが表現する `SVGTransform^I ~list
  3. ~IF[ %~list は空である ] ⇒ ~RET ~NULL ◎ If the list is empty, return null.
  4. %~list 内の ~EACH( %~item ) に対し ⇒ `~itemを~listから~detachする$( %~item ) 【! and then remove 】 ◎ Detach and then remove all elements in the list.
  5. %変形 ~LET 新たな `SVGTransform$I ~obj ◎ Let transform be a newly created SVGTransform object.
  6. %行列 ~LET 単位行列
  7. %~list 内の ~EACH( `SVGTransform$I %T ) に対し ⇒ %行列 に[ %T の`行列~obj$が表現する行列 ]を`右から乗算する$ ◎ Let matrix be the matrix value obtained by beginning with an identity matrix, and then post-multiplying the value of the matrix object for each SVGTransform in the list, in order.
  8. %変形 の`行列~obj$を成す各~成分を %行列 内の対応する成分~値に設定する ◎ Set the components of transform's matrix object to the component values in matrix.
  9. `変形の値を行列に同期する$( %変形 ) ◎ If transform's matrix object would return true from its is2d method, then set transform's value to a matrix(…) value that represents the same matrix as the matrix object. ◎ Otherwise, set transform's value to a matrix3d(…) value that represents the same matrix as the matrix object.
  10. %~list を空にする ◎ ↑
  11. `~itemを~listに~attachする$( %変形, 此れ ) ◎ Attach transform to this SVGTransformList.
  12. %~list に %変形 を付加する ◎ Append transform to this list.
  13. `必要なら内容~属性を直列化し直す$( 此れ ) ◎ If the list reflects a presentation attribute, then reserialize the reflected attribute.
  14. ~RET %変形 ◎ Return transform.

`SVGLengthList$I の他のすべての~interface~memberの挙動は、`~list~interface$にて定義される。 ◎ The behavior of all other interface members of SVGLengthList are defined in List interfaces.

8.14.3. ~interface `SVGAnimatedTransformList^I0

`SVGAnimatedTransformList$I ~objは、ある要素~上の `transform$p ~prop, それ用の呈示~属性(要素に依存して,[ `transform^a, `gradientTransform$a, `patternTransform$a ]のいずれか)を`反映する$ために利用される。 ◎ An SVGAnimatedTransformList object is used to reflect the transform property and its corresponding presentation attribute (which, depending on the element, is ‘transform’, ‘gradientTransform’ or ‘patternTransform’).

[Exposed=Window]
interface `SVGAnimatedTransformList^dfn {
  [SameObject] readonly attribute `SVGTransformList$I `baseVal$m;
  [SameObject] readonly attribute `SVGTransformList$I `animVal$m;
};
`baseVal@m
此れが反映している呈示~属性の値を表現する。 ◎ The baseVal and animVal IDL attributes represent the value of the reflected presentation attribute.\
取得子は、此れの`反映を継承する$ `SVGTransformList$I ~objを返す。 ◎ On getting baseVal or animVal, an SVGTransformList object is returned that reflects the given presentation attribute.
`animVal@m
取得子は、 `baseVal$m と同じに挙動するが,結果の`読専~flag$も ~T にする。【!補完】 ◎ ↑

8.14.4. ~interface `SVGPreserveAspectRatio^I0

`SVGPreserveAspectRatio$I ~interfaceは、 `preserveAspectRatio$a 属性~用の値を表現するために利用される。 ◎ The SVGPreserveAspectRatio interface is used to represent values for the ‘preserveAspectRatio’ attribute. ◎ 読専 flag に集約 An SVGPreserveAspectRatio object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown, as described below.

どの `SVGPreserveAspectRatio$I ~objにも,`関連な要素$は常に在る(どれも `SVGAnimatedPreserveAspectRatio$I1 の[ `baseVal$m1 / `animVal$m1 ]属性を通して公開されるので)。 ◎ Every SVGPreserveAspectRatio object reflects the base value of a reflected ‘preserveAspectRatio’ attribute (being exposed through the methods on the baseVal or animVal member of an SVGAnimatedPreserveAspectRatio).

【!id=PreserveAspectRatioMode/ReadOnlyPreserveAspectRatio】
[Exposed=Window]
interface `SVGPreserveAspectRatio^dfn {

  // Alignment Types
  const unsigned short `SVG_PRESERVEASPECTRATIO_UNKNOWN$m = 0;
  const unsigned short `SVG_PRESERVEASPECTRATIO_NONE$m = 1;
  const unsigned short `SVG_PRESERVEASPECTRATIO_XMINYMIN$m = 2;
  const unsigned short `SVG_PRESERVEASPECTRATIO_XMIDYMIN$m = 3;
  const unsigned short `SVG_PRESERVEASPECTRATIO_XMAXYMIN$m = 4;
  const unsigned short `SVG_PRESERVEASPECTRATIO_XMINYMID$m = 5;
  const unsigned short `SVG_PRESERVEASPECTRATIO_XMIDYMID$m = 6;
  const unsigned short `SVG_PRESERVEASPECTRATIO_XMAXYMID$m = 7;
  const unsigned short `SVG_PRESERVEASPECTRATIO_XMINYMAX$m = 8;
  const unsigned short `SVG_PRESERVEASPECTRATIO_XMIDYMAX$m = 9;
  const unsigned short `SVG_PRESERVEASPECTRATIO_XMAXYMAX$m = 10;

  // Meet-or-slice Types
  const unsigned short `SVG_MEETORSLICE_UNKNOWN$m = 0;
  const unsigned short `SVG_MEETORSLICE_MEET$m = 1;
  const unsigned short `SVG_MEETORSLICE_SLICE$m = 2;

  attribute unsigned short `align$m;
  attribute unsigned short `meetOrSlice$m;
};

`SVGPreserveAspectRatio$I に定義される数量-整列~種別~定数は、 `preserveAspectRatio$a がとり得る`整列~keyword$値を表現するために利用される。 各~定数に対応する~keywordは: ◎ The numeric alignment type constants defined on SVGPreserveAspectRatio are used to represent the alignment keyword values that ‘preserveAspectRatio’ can take. Their meanings are as follows:

整列~定数~表
定数 対応する~keyword
`SVG_PRESERVEASPECTRATIO_NONE@m `none^v
`SVG_PRESERVEASPECTRATIO_XMINYMIN@m `xMinYMin^v
`SVG_PRESERVEASPECTRATIO_XMIDYMIN@m `xMidYMin^v
`SVG_PRESERVEASPECTRATIO_XMAXYMIN@m `xMaxYMin^v
`SVG_PRESERVEASPECTRATIO_XMINYMID@m `xMinYMid^v
`SVG_PRESERVEASPECTRATIO_XMIDYMID@m `xMidYMid^v
`SVG_PRESERVEASPECTRATIO_XMAXYMID@m `xMaxYMid^v
`SVG_PRESERVEASPECTRATIO_XMINYMAX@m `xMinYMax^v
`SVG_PRESERVEASPECTRATIO_XMIDYMAX@m `xMidYMax^v
`SVG_PRESERVEASPECTRATIO_XMAXYMAX@m `xMaxYMax^v
`SVG_PRESERVEASPECTRATIO_UNKNOWN@m なし(定数は何らかの他の種別を表す)
◎ Constant Meaning SVG_PRESERVEASPECTRATIO_NONE The none keyword. SVG_PRESERVEASPECTRATIO_XMINYMIN The xMinYMin keyword. SVG_PRESERVEASPECTRATIO_XMIDYMIN The xMidYMin keyword. SVG_PRESERVEASPECTRATIO_XMAXYMIN The xMaxYMin keyword. SVG_PRESERVEASPECTRATIO_XMINYMID The xMinYMid keyword. SVG_PRESERVEASPECTRATIO_XMIDYMID The xMidYMid keyword. SVG_PRESERVEASPECTRATIO_XMAXYMID The xMaxYMid keyword. SVG_PRESERVEASPECTRATIO_XMINYMAX The xMinYMax keyword. SVG_PRESERVEASPECTRATIO_XMIDYMAX The xMidYMax keyword. SVG_PRESERVEASPECTRATIO_XMAXYMAX The xMaxYMax keyword. SVG_PRESERVEASPECTRATIO_UNKNOWN Some other type of value.

同様に, `SVGPreserveAspectRatio$I に定義される数量- ~meet-or-slice種別~定数は、 `preserveAspectRatio$a がとり得る `meetOrSlice$t ~keyword値を表現するために利用される。 各~定数に対応する~keywordは: ◎ Similarly, the numeric meet-or-slice type constants defined on SVGPreserveAspectRatio are used to represent the meet-or-slice keyword values that ‘preserveAspectRatio’ can take. Their meanings are as follows:

~meet-or-slice定数~表
定数 対応する~keyword
`SVG_MEETORSLICE_MEET@m `meet^v
`SVG_MEETORSLICE_SLICE@m `slice^v
`SVG_MEETORSLICE_UNKNOWN@m なし(定数は何らかの他の種別を表す)
◎ Constant Meaning SVG_MEETORSLICE_MEET The meet keyword. SVG_MEETORSLICE_SLICE The slice keyword. SVG_MEETORSLICE_UNKNOWN Some other type of value.
`align@m

`preserveAspectRatio$a 値の`整列~keyword$を成す部分を表現する。 ◎ The align IDL attribute represents the alignment keyword part of the ‘preserveAspectRatio’ value.\

取得子は、次を走らす: ◎ On getting, the following steps are run:

  1. %値 ~LET 此れに`関連な要素$の `preserveAspectRatio$a 属性の`基底~値$ ◎ Let value reflect the base value of a ‘preserveAspectRatio’ attribute. value is the current non-animated value of the attribute (using the attribute's initial value if it is not present or invalid).
  2. ~RET %値 を成す`整列~keyword$に対応する,上の整列~定数~表に指定される定数~値 ◎ Return the constant value as specified in the alignment constant table above for the alignment keyword in value.

設定子は、次を走らす: ◎ On setting align, the following steps are run:

  1. ~IF[ 此れの`読専~flag$ ~EQ ~T ] ⇒ ~THROW `NoModificationAllowedError$E ◎ If the SVGPreserveAspectRatio is read only, then throw a NoModificationAllowedError.
  2. ~IF[ 所与の値 ~EQ `SVG_PRESERVEASPECTRATIO_UNKNOWN$m ]~OR[ 所与の値は 上の整列~定数~表に現れない ] ⇒ ~THROW `TypeError$E ◎ If value is SVG_PRESERVEASPECTRATIO_UNKNOWN or does not have a corresponding entry in the alignment keyword table above, then throw a TypeError.
  3. 此れに`関連な要素$の `preserveAspectRatio$a 属性の値 ~SET 次を順に連結した結果の文字列 ⇒# 上の整列~定数~表~内の 所与の値に対応する~keyword, 文字 `0020^U SPACE, 此れの `meetOrSlice$m ~memberが返すことになる値に対応する上の ~meet-or-slice~keyword表~内の~keyword ◎ Let string be the corresponding keyword in the alignment keyword table above for value. ◎ Append a single U+0020 SPACE character to string. ◎ Let meet or slice be the value that would be returned from the meetOrSlice member on this SVGPreserveAspectRatio. ◎ Append to string the corresponding keyword in the meet-or-slice keyword table above for meet or slice. ◎ Set the reflected ‘preserveAspectRatio’ attribute to string.
`meetOrSlice@m
`preserveAspectRatio$a 値の`整列~keyword$を成す部分を表現する。 ◎ The meetOrSlice IDL attribute represents the alignment keyword part of the ‘preserveAspectRatio’ value.\

取得子は、次を走らす: ◎ On getting, the following steps are run:

  1. ~IF[ 此れに`関連な要素$の `preserveAspectRatio$a 属性の`基底~値$に `meetOrSlice$t 成分は与えられている ] ⇒ ~RET 上の~meet-or-slice定数~表に指定される,その成分に対応する定数~値 ◎ Let value be a ‘preserveAspectRatio’ value that reflects the base value of a ‘preserveAspectRatio’ attribute value is the current non-animated value of the attribute.
  2. ~RET `SVG_MEETORSLICE_MEET$m ◎ If the meet-or-slice value is not present in value, then return SVG_MEETORSLICE_MEET. ◎ Otherwise, the meet-or-slice value is present. Return the constant value as specified in the meet-or-slice constant table above for the meet-or-slice keyword in value.

設定子は、次を走らす: ◎ On setting meetOrSlice, the following steps are run:

  1. ~IF[ 此れの`読専~flag$ ~EQ ~T ] ⇒ ~THROW `NoModificationAllowedError$E ◎ If the SVGPreserveAspectRatio is read only, then throw a NoModificationAllowedError.
  2. ~IF[ 所与の値 ~EQ `SVG_MEETORSLICE_UNKNOWN$m ]~OR[ 所与の値は 上の~meet-or-slice~keyword表に挙げた定数でない ] ⇒ ~THROW `TypeError$E ◎ If value is SVG_MEETORSLICE_UNKNOWN or does not have a corresponding entry in the meet-or-slice keyword table above, then throw a TypeError.
  3. %整列~keyword ~LET 上の整列~定数~表~内の[ 此れの `align$m ~memberが返すことになる値 ]に対応する~keyword ◎ Let align be the value that would be returned from the align member on this SVGPreserveAspectRatio.
  4. 此れに`関連な要素$の `preserveAspectRatio$a 属性の値 ~SET 次を順に連結した結果の文字列 ⇒# %整列~keyword, 文字 `0020^U `SPACE^cn, 上の~meet-or-slice~keyword表~内の 所与の値に対応する~keyword ◎ Let string be the corresponding keyword in the alignment keyword table above for align. ◎ Append a single U+0020 SPACE character to string. ◎ Append to string the corresponding keyword in the meet-or-slice keyword table above for value. ◎ Set the reflected ‘preserveAspectRatio’ attribute to string.

8.14.5. ~interface `SVGAnimatedPreserveAspectRatio^I0

`SVGAnimatedPreserveAspectRatio$I ~objは、 `preserveAspectRatio$a 属性を`反映する$ために利用される。 【 `SVGFitToViewBox$I1 を実装する要素の `preserveAspectRatio$m1 属性から返される。】 ◎ An SVGAnimatedPreserveAspectRatio object is used to reflect the ‘preserveAspectRatio’ attribute.

[Exposed=Window]
interface `SVGAnimatedPreserveAspectRatio^dfn {
  [SameObject] readonly attribute `SVGPreserveAspectRatio$I `baseVal$m;
  [SameObject] readonly attribute `SVGPreserveAspectRatio$I `animVal$m;
};
`baseVal@m
此れが反映している `preserveAspectRatio$a 属性の現在の値を表現する。 ◎ The baseVal and animVal IDL attributes represent the current non-animated value of the reflected ‘preserveAspectRatio’ attribute.\
取得子は、此れの`反映を継承する$ `SVGPreserveAspectRatio$I ~objを返す。 ◎ On getting baseVal or animVal, an SVGPreserveAspectRatio object is returned that reflects the base value of the ‘preserveAspectRatio’ attribute on the SVG element that the object with the reflcting IDL attribute of type SVGAnimatedPreserveAspectRatio was obtained from.
`animVal@m
取得子は、 `baseVal$m と同じに挙動するが,結果の`読専~flag$も ~T にする。【!補完】 ◎ ↑