1. 序論
~INFORMATIVE~CSSの`視覚~整形~model$は、各 要素が位置される座標系について述べている。 この座標~空間における位置と~sizeは、原点から右方/下方に向かって増大する画素~数による正の値で表されるものと捉え得る。 ◎ The CSS visual formatting model describes a coordinate system within each element is positioned. Positions and sizes in this coordinate space can be thought of as being expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.
この座標~空間は, `transform$p ~propにより改変できる。 この変形-により,要素を並進させ, 回転させ, 拡縮させられる。 ◎ This coordinate space can be modified with the transform property. Using transform, elements can be translated, rotated and scaled.
1.1 ~module間の相互作用
この~moduleは、適用-対象の要素の視覚的~描画に影響する,一連の~CSS~propを定義する — これらの効果は、 `CSS2$r の`視覚~整形~model$に則って,要素の~sizeと位置が~~決定された後に適用される。 これらの~propの一部の値に対しては、新たな`包含塊$が設置されたり, `積層~文脈$が確立される。 ◎ This module defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the visual formatting model from [CSS2]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.
変形-は、 `CSS3BG$r にて指定される[ `background-attachment$p ~propに値 `fixed$v を伴う要素 ]上の背景~描画にも影響する。 ◎ Transforms affect the rendering of backgrounds on elements with a value of fixed for the background-attachment property, which is specified in [CSS3BG].
変形-は、 `CSSOM-VIEW$r による `Element^I ~interface拡張: `getClientRects()$m, `getBoundingClientRect()$m が返す~client矩形にも影響する。 ◎ Transforms affect the client rectangles returned by the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].
変形-は、`~scroll可能な~overflow領域$ `CSS-OVERFLOW-3$r の算出にも影響する。 ◎ Transforms affect the computation of the scrollable overflow region as described by [CSS-OVERFLOW-3].
1.2. ~CSS値
【 この節の内容は ~CSS日本語訳 共通ページ に委譲 】
2. 各種用語
この節では、この仕様にて利用される用語を定義する: ◎ When used in this specification, terms have the meanings assigned in this section.
- `変形-可能@ ◎ transformable element
-
次に挙げる要素が,変形-可能とされる: ◎ A transformable element is an element in one of these categories:
- ~CSS~box~modelにより~layoutが統制されるもの `CSS2$r — ただし,次に該当するものは除く ⇒# `置換され$ない行内~box, `table-column^v ~box, `table-column-group^v ~box ◎ all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],
- すべての~SVG[ `塗t~server要素$ / `clipPath$e 要素 / `描画-可能な要素$ ]のうち,`~text内容~要素$の子孫でないもの。 `SVG2$r ◎ all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2]. all SVG paint server elements and
- `変形d要素@ ◎ transformed element
- `transform$p ~propの算出値に `none^v 以外の値を伴う要素。 ◎ An element with a computed value other than none for the transform property.
- `利用元~座標系@ ◎ user coordinate system
- `局所~座標系@ ◎ local coordinate system
- 一般に,現在の~canvas上の位置と距離を定義する座標系を指す。 現在の局所~座標系(利用元~座標系とも呼ばれる)とは、現在の~canvas上の 座標や長さを算出する方法を定義する,現在~利用中の座標系を意味する。 ◎ In general, a coordinate system defines locations and distances on the current canvas. The current local coordinate system (also user coordinate system) is the coordinate system that is currently active and which is used to define how coordinates and lengths are located and computed, respectively, on the current canvas.\
- 現在の利用元~座標系の原点は、 `transform-box$p ~propにより指定される`基準~box$の左上隅に位置する。 百分率~値は、この基準~boxの寸法に相対的になる。 1 単位は 1 ~CSS画素に等しい。 ◎ The current user coordinate system has its origin at the top-left of a reference box specified by the transform-box property. Percentage values are relative to the dimension of this reference box. One unit equals one CSS pixel.
- `変形~行列@ ◎ transformation matrix
- ある座標系から別の座標系への数学的な写像を定義する行列。 `transform$p, `transform-origin$p ~propの値から, 後述の様に 算出される。 ◎ A matrix that defines the mathematical mapping from one coordinate system into another. It is computed from the values of the transform and transform-origin properties as described below.
- `現在の変形~行列@( CTM ) ◎ CTM — current transformation matrix)
- 当の要素の`局所~座標系$から`表示域~座標系$への写像を定義する行列。 ◎ A matrix that defines the mapping from the local coordinate system into the viewport coordinate system.
- `~2D行列@ ◎ 2D matrix
- ~3x2変形~行列であるか、または ~4x4変形~行列であって,項[ `31^M, `32^M, `13^M, `23^M, `43^M, `14^M, `24^M, `34^M ]が 0 に等しく, 項[ `33^M, `44^M ]が 1 に等しいもの。 ◎ A 3x2 transformation matrix, or a 4x4 matrix where the items m31, m32, m13, m23, m43, m14, m24, m34 are equal to 0 and m33, m44 are equal to 1.
- 【 実質的には 3×3 の行列であり,各元が 3 成分~vectorで表現される `射影平面^_ (すなわち,~2D `射影空間^_ )に作用する。 ~4x4の行列は、~3D射影空間に埋め込まれた,同じ射影平面に作用する。 】
- `恒等~変形-関数@ ◎ identity transform function
- ~4x4の単位行列に等価な`変形-関数$(`変形-関数の数学的~記述$を見よ)。 恒等~変形-関数の例には次が挙げられる ⇒# `translate(0)^v, `translateX(0)^v, `translateY(0)^v, `scale(1)^v, `scaleX(1)^v, `scaleY(1)^v, `rotate(0)^v, `skew(0, 0)^v, `skewX(0)^v, `skewY(0)^v, `matrix(1, 0, 0, 1, 0, 0)^v ◎ A transform function that is equivalent to a identity 4x4 matrix (see Mathematical Description of Transform Functions). Examples for identity transform functions are translate(0), translateX(0), translateY(0), scale(1), scaleX(1), scaleY(1), rotate(0), skew(0, 0), skewX(0), skewY(0) and matrix(1, 0, 0, 1, 0, 0).
- `右から乗算-@( `post-multiply^en / `post-multiplied by^en )
- 項 %A に項 %B を右から乗算するときは、 %A を %A × %B の結果に改変する。 ◎ Term A post-multiplied by term B is equal to A · B.
- 【 この × は行列の乗算を表す(以下でも利用される)。 】【 %A や %B は正方~行列に限られない。 】【 原文には, “改変する” とは記されていないが、改変する/しないの区別は 文脈によっては重要になるので,ここでは明示的に記す。 改変しない必要がある場合、下の`乗算-$を用いて述べることにする。 】
- 【 ここに述べる乗算の用法は `DOMMatrix$I のそれに一致する。 】
- `左から乗算-@( `pre-multiply^en / `pre-multiplied by^en )
- 項 %A に項 %B を左から乗算するときは、 %A を %B × %A の結果に改変する。 ◎ Term A pre-multiplied by term B is equal to B · A.
- 【 点 %A に行列 %B を左から乗算する場合、 %A を,その各~成分が成す縦~vectorによる 1×4 の行列と見なすことになる。 】
- `乗算-@( `multiply^en )
- 項 %A, %B を乗算するときは、 %A × %B の結果を返す( %A, %B は改変されない)。 ◎ Multiply term A by term B is equal to A · B.
- 【 可換でないので、 %A, %B の順序は有意になる。 結合律は満たすので、 3 個~以上の行列を乗算するときの順序は有意にならない。 】
3. 変形-の描画~model
`transform$p ~propに `none^v 以外の値を指定した場合、適用-対象の要素に,新たな`局所~座標系$を確立させる。 この~propにより指定される`変形~行列$は、要素の`局所~座標系$から描画-先への写像を与える†。 ◎ This section is normative. ◎ Specifying a value other than none for the transform property establishes a new local coordinate system at the element that it is applied to. The mapping from where the element would have rendered into that local coordinate system is given by the element’s transformation matrix.
【† 原文は,逆に写像するように読めるが、以下の記述に反するので直している(例えば `scale(0)^v は、要素の局所~座標系のすべての座標を描画-先の一点に写像する — その逆~写像は定義できない)。 】
`変形~行列$は、要素~上の[ `transform$p, `transform-origin$p ]~propから,次に従って得られる結果の行列 %TM になる: ◎ The transformation matrix is computed from the transform and transform-origin properties as follows:
- %T ~LET `transform-origin$p の算出値が与える移動量による`~2D並進$ ◎ Start with the identity matrix. ◎ Translate by the computed X and Y of transform-origin
- %TM ~SET %T の複製 ◎ ↑
- `transform$p ~propで与えられる変形-関数~listを成す ~EACH( 変形-関数 %F ) に対し,順に ⇒ %TM に %F が表現する行列を`右から乗算-$する ◎ Multiply by each of the transform functions in transform property from left to right
- %TM に %T の逆行列を`右から乗算-$する ◎ Translate by the negated computed X and Y values of transform-origin
要素の `transform$p ~propは `none^v でない: ◎ An element has a transform property that is not none.
div { transform-origin: 0 0; transform: translate(-10px, -20px) scale(2) rotate(45deg); }
`0 0^v に設定された `transform-origin$p ~propは、省略できる。 `変形~行列$ %TM は、変形-関数[ `translate$ft, `scale$ft, `rotate$ft ]が表現する各 変形~行列をこの順に`乗算-$して算出される: ◎ The transform-origin property is set to 0 0 and can be omitted. The transformation matrix TM gets computed by post-multying the <translate()>, <scale()> and <rotate()> <transform-function>s.
変形-は、`変形-可能$な要素に適用される。 ◎ Transforms apply to transformable elements.
この座標~空間は、 X 軸は右方に, Y 軸は下方に増大する座標系である。 ◎ The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards.
変形は累積的である。 すなわち、要素はその親の座標系の中で局所~座標系を確立する。 ◎ Transformations are cumulative. That is, elements establish their local coordinate system within the coordinate system of their parent.
要素の`局所~座標系$の点 %P を親の`局所~座標系$の中へ写像した結果 %Q は、要素の`変形~行列$ %TM と %P (縦~vector)をこの順に`乗算-$して得られる 【`~2D行列$にて述べたように、演算は~3D射影空間の中で遂行される】 : ◎ To map a point plocal with the coordinate pair xlocal and ylocal from the local coordinate system of an element into the parent’s coordinate system, post-multiply the transformation matrix TM of the element by plocal. The result is the mapped point pparent with the coordinate pair xparent and yparent in the parent’s local coordinate system.
利用者からは、要素は,実質的に それに適用される局所~変形-に加えて,そのすべての先祖の `transform$p ~propが累積されたように見える。 要素~用の`現在の変形~行列$は、これらの変形-の累積により定義される。 ◎ From the perspective of the user, an element effectively accumulates all the transform properties of its ancestors as well as any local transform applied to it. The accumulation of these transforms defines a current transformation matrix (CTM) for the element.
要素の`現在の変形~行列$は、`表示域~座標系$から要素の`変形~行列$までのすべての変形~行列を,先祖から順に`乗算-$して算出される。 ◎ The current transformation matrix is computed by post-multiplying all transformation matrices starting from the viewport coordinate system and ending with the transformation matrix of an element.
次の例には、~SVG文書~内に入子にされた複数の要素があり,~SVG `rect$e 要素が`変形~行列$により変形される。 ◎ This example has multiple, nested elements in an SVG document. Some elements get transformed by a transformation matrix.
<svg xmlns="http://www.w3.org/2000/svg"> <g transform="translate(-10, 20)"> <g transform="scale(2)"> <rect width="200" height="200" transform="rotate(45)"/> </g> </g> </svg>
`rect^e 要素~用の`現在の変形~行列$ %CTM は、[ `translate(-10, 20)^v, `scale(2)^v, `rotate(45)^v ]が表現する各 変形~行列をこの順に`乗算-$した結果になる: ◎ translate(-10, 20) computes to the transformation matrix T1 ◎ scale(2) computes to the transformation matrix T2 ◎ rotate(45) computes to the transformation matrix T3 ◎ The CTM for the SVG rect element is the result of multiplying T1, T2 and T3 in order.
`rect^e 要素の`局所~座標系$の点 %P を`表示域~座標系$の中へ写像した結果 %Q は、 %CTM と %P をこの順に`乗算-$して得られる: ◎ To map a point plocal with the coordinate pair xlocal and ylocal from the local coordinate system of the SVG rect element into the viewport coordinate system, post-multiply the current transformation matrix CTM of the element by plocal. The result is the mapped point pviewport with the coordinate pair xviewport and yviewport in the viewport coordinate system.
注記: 変形は、~canvas上の描画には影響するが、~CSS~layout自体には,~overflowを除いて影響しない。 変形-は、 `CSSOM-VIEW$r にて指定される[ `Element^I ~interface拡張により公開される `getClientRects()$m, `getBoundingClientRect()$m ]による~client矩形の算出にも織り込まれる。 ◎ Note: Transformations do affect the visual rendering, but have no affect on the CSS layout other than affecting overflow. Transforms are also taken into account when computing client rectangles exposed via the Element Interface Extensions, namely getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].
div { transform: translate(100px, 100px); }
この変形-は、要素を X, Y 両方向に 100 画素~移動させる(図左が変形-~前, 図右が変形-~後)。 ◎ This transform moves the element by 100 pixels in both the X and Y directions.
div { height: 100px; width: 100px; transform-origin: 50px 50px; transform: rotate(45deg); }
`transform-origin$p ~propにより,原点を X, Y 両方向に 50 画素ずつずらす。 `transform^p は,原点を中心に要素を時計回りに 45° 回転させる。 すべての変形-関数が適用された後、原点は, X, Y 両方向に -50 画素だけ並進されて引き戻される。 ◎ The transform-origin property moves the point of origin by 50 pixels in both the X and Y directions. The transform rotates the element clockwise by 45° about the point of origin. After all transform functions were applied, the translation of the origin gets translated back by -50 pixels in both the X and Y directions.
【 上の例による効果は、次と等価になる: 】
div { height: 100px; width: 100px; transform-origin: 0px 0px; transform: translate(50px, 50px) rotate(45deg) translate(-50px, -50px); }
div { height: 100px; width: 100px; transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); }
視覚的な外観は、 `div$e 要素が右下へ ( 80px, 80px ) 並進され, 150% に拡大され, 45° 回転されたかのようになる。 ◎ The visual appareance is as if the div element gets translated by 80px to the bottom left direction, then scaled up by 150% and finally rotated by 45°.
各 `transform-function$t は、対応する~4x4行列により表現できる。 これらの変形-は、ある点を `div^e ~boxの座標~空間から親~要素の座標~空間へ写像するときには,逆~順に`左から乗算-$される ⇒ 写像した結果の点 ~EQ ( 並進~行列 × 拡縮-行列 × 回転~行列 ) × 元の点 ◎ Each <transform-function> can get represented by a corresponding 4x4 matrix. To map a point from the coordinate space of the div box to the coordinate space of the parent element, these transforms get multiplied in the reverse order: • The rotation matrix gets post-multiplied by the scale matrix. • The result of the previous multiplication is then post-multiplied by the translation matrix to create the accumulated transformation matrix. • Finally, the point to map gets pre-multiplied with the accumulated transformation matrix.
【すなわち、要素は、回転され, 拡縮され, 並進される。】 詳細は 変形-関数の~list 節を見よ。 ◎ For more details see The Transform Function Lists.
注記: 要素を入子にした上で,等価な変形-を与えても、一致する描画~結果を得られることに注意: ◎ Note: The identical rendering can be obtained by nesting elements with the equivalent transforms:
<div style="transform: translate(80px, 80px)"> <div style="transform: scale(1.5, 1.5)"> <div style="transform: rotate(45deg)"></div> </div> </div>
【 何故 “逆順の構文” にされているかは、上の例から明らかであろう( 仮に HTML の構文が要素の属性を~~終了タグに記すものであったなら、逆順にしない方が自然になるであろう )。 】
【 各~変形-をそのままの順に適用するときは、次のように解釈するとよい: 要素に,自身の局所~座標系を表す X, Y 軸が(この例では要素の中心を原点にとる)描かれていると考えたとき、それぞれの変形-関数は,この描かれている(すなわち,要素に固着している)座標軸を基準にする。 上の例では,順序による効果が露わにならないので、次の例を考える:
transform: rotate(45deg) translate(80px, 80px);
これは、要素を 45° 回転してから, その45° 回転された座標軸 を基準に ( 80px, 80px ) 移動する — すなわち、見かけ上の移動~方向は,(右下ではなく)真下になる。 言い換えれば、 “45° 回転~眼鏡” を通して眺めている 向こう側の世界 では, ( 80px, 80px ) (右下へ)移動している。 同様に:
transform: scale(2) translate(80px, 80px);
では、倍に拡大された座標軸を基準に並進が適用されるので,見かけ上の移動量は (160px, 160px) になる。 また:
transform: skewX(30deg) rotate(90deg);
では、 Y 軸だけが 30° 傾いた座標軸を基準に 90° の回転が適用されるので,見かけ上は X 軸が 60°, Y 軸が 120° 回転される。 】
~layoutが~CSS~box~modelにより統制される要素においては、変形-~propは,`変形d要素$の周囲の内容の~flowには影響しない。 しかしながら、~overflow区画には,`変形d要素$も織り込まれる。 この挙動は、要素が相対的な位置決め( `position$p: `relative^v )を通してずらされるときに類似する。 したがって, `overflow$p ~propの値が `scroll^v / `auto^v の下では、可視~区画の外側に変形された内容も見れるようにするための~scrollbarが,必要に応じて現れることになる。 特定的には、変形-は~overflow区画の~sizeを拡幅し得る(が縮短しない) — それは、変形-を適用する前, 後の要素たちの限界域の和集合として算出される。 ◎ For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area. Specifically, transforms can extend (but do not shrink) the size of the overflow area, which is computed as the union of the bounds of the elements before and after the application of transforms.
~layoutが~CSS~box~modelにより統制される要素においては、変形-~用の `none^v 以外のどの値も: ◎ For elements whose layout is governed by the CSS box model, any value other than none for the transform\
- 要素に`積層~文脈$を作成させることになる。 実装は、[ この作成した層を塗る際の,親の`積層~文脈$の中での積層~順序 ]を,[ 要素が,`z-index$p が `0^v にされた有位置な要素であった ]とするときのそれと同じにし~MUST。 変形-を伴う有位置な要素に対しては、 `z-index^p ~propは, `CSS2$r に述べられるように適用される — ただし、新たな積層~文脈を常に作成するので, `auto^v は `0^v に扱うとする。 ◎ results in the creation of a stacking context. Implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with z-index: 0. If an element with a transform is positioned, the z-index property applies as described in [CSS2], except that auto is treated as 0 since a new stacking context is always created.
- 要素は`包含塊$にもなり、~objは,固定位置された子孫~用の包含塊としてふるまうようになる。 ◎ For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants.
固定位置された~obj — `position$p: `fixed^v — に効果を及ぼすことは必要とされるのか? そうであれば、~objがこれをすべき~~理由について詳細を述べる必要がある — その実装はずっと困難になるので。 `913$issue ◎ Is this effect on position: fixed necessary? If so, need to go into more detail here about why fixed positioned objects should do this, i.e., that it’s much harder to implement otherwise. <https://github.com/w3c/fxtf-drafts/issues/913>
根~要素~上に`固定された背景$は、その要素に指定されたどの変形-からも影響される。 変形-から影響される(すなわち,自身または先祖の要素に変形-が適用されている)他のすべての要素に対しては、 `background-attachment$p ~propに対する値 `fixed$v は,値 `scroll$v を持つかのように扱われる。 `background-attachment$p の算出値は影響されない。 ◎ Fixed backgrounds on the root element are affected by any transform specified for that element. For all other elements that are effected by a transform (i.e. have a transform applied to them, or to any of their ancestor elements), a value of fixed for the background-attachment property is treated as if it had a value of scroll. The computed value of background-attachment is not affected.
注記: 根~要素が変形された場合、変形は,根~要素に指定されている背景も含めて,~canvas全体に適用される。 `根~要素~用の背景~塗り区画$は ~canvas全体であり無限なので、変形により,元々は~screen外に在った背景の一部分が現れるようになり得る。 例えば,根~要素の背景が~dotの繰り返し模様であって, 根~要素~上に変形 `scale(0.5)^v が指定されていたなら、~dotの大きさは半分になるが,その個数は 2 × 2 倍になり,依然として表示域の全面を覆うことになる。 ◎ Note: If the root element is transformed, the transformation applies to the entire canvas, including any background specified for the root element. Since the background painting area for the root element is the entire canvas, which is infinite, the transformation might cause parts of the background that were originally off-screen to appear. For example, if the root element’s background were repeating dots, and a transformation of scale(0.5) were specified on the root element, the dots would shrink to half their size, but there will be twice as many, so they still cover the whole viewport.
4. `transform^p ~prop
変形は、 `transform$p ~propを通して要素が描画される座標系に適用される。 この~propは`変形-関数$の~listを包含する。 座標系に対する最終的な変形の結果は、`変形-関数の数学的~記述$にて定義されるように,~listの中の各~関数を対応する行列に換算した上で,それらの行列を乗算することにより得られる。 ◎ A transformation is applied to the coordinate system an element renders into through the transform property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix like defined in Mathematical Description of Transform Functions, then multiplying the matrices.
◎名 `transform@p ◎値 `none^v | `transform-list$t ◎初 `none^v ◎適 `変形-可能$な要素 ◎継 されない ◎百 `基準~box$の~sizeに相対的 ◎ refer to the size of reference box ◎算 指定値。ただし,相対~長さは絶対~長さに換算される。 ◎ As specified, but with relative lengths converted into absolute lengths. ◎順 文法に従う ◎ア 変形-として補間される ◎表終`transform^p 用の `none^v 以外のどの算出値も, 変形-の描画~model に述べたように `包含塊$と`積層~文脈$に影響する。 ◎ Any computed value other than none for the transform affects containing block and stacking context, as described in §3 The Transform Rendering Model.
`transform-list@t = `transform-function$t+
4.1. `transform-function^t の直列化
`transform-function$t を直列化するためには、文法に記された順序どおりに,それぞれの文法に従って直列化する — その際には ⇒# 可能な所では, `calc$f 式を避け、 可能な所では, `calc$f による変形-は避け、 可能な所では,意味を変えずに成分を省略し、 ~space区切りの~tokenは, 1 個の~spaceで区切り、 直列化される各~commaごとに, 1 個の~spaceを後続させる。 ◎ To serialize the <transform-function>s, serialize as per their individual grammars, in the order the grammars are written in, avoiding <calc()> expressions where possible, avoiding <calc()> transformations, omitting components when possible without changing the meaning, joining space-separated tokens with a single space, and following each serialized comma with a single space.
4.2. `transform-list^t の算出値の直列化
`transform-list$t の`算出値$を直列化するときは、その中のすべての `transform-function$t を~4x4行列に換算して順に乗算した結果を `matrix$ft として直列化した結果を返す。 ◎ A <transform-list> for the computed value is serialized to one <matrix()> function by the following algorithm: • Let transform be a 4x4 matrix initialized to the identity matrix. The elements m11, m22, m33 and m44 of transform must be set to 1 all other elements of transform must be set to 0. • Post-multiply all <transform-function>s in <transform-list> to transform. • Serialize transform to a <matrix()> function.
5. `transform-origin^p ~prop
◎名 `transform-origin@p ◎値 [ `left$vo | `center$vo | `right$vo | `top$vo | `bottom$vo | `length-percentage$t ]|
[ `left$vo | `center$vo | `right$vo | `length-percentage$t ]
[ `top$vo | `center$vo | `bottom$vo | `length-percentage$t ] `length$t?
|
[ [ `center$vo | `left$vo | `right$vo ] && [ `center$vo | `top$vo | `bottom$vo ] ] `length$t? ◎初 `50% 50%^v ◎適 `変形-可能$な要素 ◎継 されない ◎百 `基準~box$の~sizeに相対的 ◎ refer to the size of reference box ◎算 `length$t に対しては絶対~値【絶対~化?】, 他の場合は百分率 ◎ For <length> the absolute value, otherwise a percentage. ◎順 文法に従う ◎ア `長さ, 百分率, calc 式$の`単純~list$として補間される ◎ as simple list of length, percentage, or calc ◎表終
`transform$p, `transform-origin$p ~propの値は、上述に従って`変形~行列$を算出するために利用される。 ◎ The values of the transform and transform-origin properties are used to compute the transformation matrix, as described above.
指定された(成分)値が 1 個だけの場合、 2 個目の値は `center$vo と見做される。 指定された値が 2 個~以下の場合、 3 個目の値は `0px^v と見做される。 ◎ If only one value is specified, the second value is assumed to be center. If one or two values are specified, the third value is assumed to be 0px.
この補完により得られた 3 個の値のうち,最初の 2 個の値のいずれにも `center$vo 以外の~keywordが利用されていない場合、 1 個目の値は 横位置(または~offset)を表現し, 2 個目の値は 縦位置(または~offset)を表現する。 3 個目の値は常に Z 位置(または~offset)を表現し, `length$t 型で~MUST。 【 3 個目の値は~3D変形-用の拡張なので、この仕様(~level 1 )の文脈では~~意味を成さない。】 ◎ If two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). A third value always represents the Z position (or offset) and must be of type <length>.
- `length-percentage$t
- [ 横/縦 ]~offset用の百分率は、`基準~box$の[ 横幅/縦幅 ]に相対的になる。 [ 横/縦 ]~offset値は、`基準~box$の左上~隅からの[ 横/縦 ]~offsetを表現する。 ◎ A percentage for the horizontal offset is relative to the width of the reference box. A percentage for the vertical offset is relative to the height of the reference box. The value for the horizontal and vertical offset represent an offset from the top left corner of the reference box.
- `length$t
- 長さ値は、固定長による`基準~box$の左上~隅からの[ 横/縦 【 および Z 方向の】 ]~offsetを表現する。 ◎ A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the reference box.
- `top@vo
- 縦位置~用の `0%^v に算出される。 ◎ Computes to 0% for the vertical position.
- `right@vo
- 横位置~用の `100%^v に算出される。 ◎ Computes to 100% for the horizontal position.
- `bottom@vo
- 縦位置~用の `100%^v に算出される。 ◎ Computes to 100% for the vertical position.
- `left@vo
- 横位置~用の `0%^v に算出される。 ◎ Computes to 0% for the horizontal position.
- `center@vo
-
横位置が指定されていない場合、横位置~用の 50% (したがって[
50% `<縦位置の指定>^V …
]†)に算出される。 他の場合、縦位置~用の 50% (したがって[`<横位置の指定>^V 50% …
]†)に算出される。 【 † 原文の記述は変だったので修正】 ◎ Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.
~CSS~layout~boxが結付けられていない~SVG要素~用の初期`使用値$は、 ~UAが次の~stylesheetを包含していたかのように, `0 0^v になるとする: ◎ For SVG elements without associated CSS layout box the initial used value is 0 0 as if the user agent style sheet contained:
*:not(svg), *:not(foreignObject) > svg { transform-origin: 0 0; }
`transform-origin$p の`解決値$は、 `height^p の様に特別 とする。 `CSSOM$r ◎ The transform-origin property is a resolved value special case property like height. [CSSOM]
6. 変形-~基準~box: `transform-box^p ~prop
◎名 `transform-box@p ◎値 `content-box$vb | `border-box$vb | `fill-box$vb | `stroke-box$vb | `view-box$vb ◎初 `view-box^v ◎適 `変形-可能$な要素 ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終`transform$p, `transform-origin$p ~propにより定義される変形の位置と寸法は、次のいずれかとして指定される `基準~box@ に相対的になる: ◎ All transformations defined by the transform and transform-origin property are relative to the position and dimensions of the reference box of the element. The reference box is specified by one of the following:
- `content-box@vb
- `内容~box$を基準~boxに利用する。 ~tableの基準~boxは、その~table~boxではなく,その`~table包装~box$の~border~boxになる。 ◎ Uses the content box as reference box. The reference box of a table is the border box of its table wrapper box, not its table box.
- `border-box@vb
- `~border~box$を基準~boxに利用する。 ~tableの基準~boxは、その~table~boxではなく,その`~table包装~box$の~border~boxになる。 ◎ Uses the border box as reference box. The reference box of a table is the border box of its table wrapper box, not its table box.
- `fill-box@vb
- `~obj限界~box$を基準~boxに利用する。 ◎ Uses the object bounding box as reference box.
- `stroke-box@vb
- `~stroke限界~box$を基準~boxに利用する。 ◎ Uses the stroke bounding box as reference box.
- `view-box@vb
- 最も近い `~SVG表示域$( `viewport^en )を基準~boxに利用する。 ◎ Uses the nearest SVG viewport as reference box.
- 【 “最も近い表示域” — 要素の先祖†の中で ~SVG表示域を確立する 様な要素のうち,要素に最も近い先祖が確立した表示域(† 要素~自身も含めるかどうかは,はっきりしない)。 】
-
`~SVG表示域$を作成している【確立している】要素に `viewBox$a 属性が指定されている場合: ◎ If a viewBox attribute is specified for the SVG viewport creating element:
- 基準~boxは `viewBox$a 属性により確立される座標系の原点に位置される。 ◎ The reference box is positioned at the origin of the coordinate system established by the viewBox attribute.
- 基準~boxの寸法は `viewBox$a 属性の width, height 成分~値に設定される。 ◎ The dimension of the reference box is set to the width and height values of the viewBox attribute.
~SVG `pattern$e 要素に対しては、 基準~boxは `patternUnits$a 属性により定義される。 `SVG2$r ◎ For the SVG pattern element, the reference box gets defined by the patternUnits attribute [SVG2].
~SVG[ `linearGradient$e / `radialGradient$e ]要素に対しては、 基準~boxは `gradientUnits$a 属性により定義される。 `SVG2$r ◎ For the SVG linearGradient and radialGradient elements, the reference box gets defined by the gradientUnits attribute [SVG2].
~SVG `clipPath$e 要素に対しては、 基準~boxは `clipPathUnits$a 属性により定義される。 `CSS-MASKING$r ◎ For the SVG clipPath element, the reference box gets defined by the clipPathUnits attribute [CSS-MASKING].
基準~boxは、 `transform-origin$p ~propにより指定される原点に対し,追加の~offsetを加える ◎ A reference box adds an additional offset to the origin specified by the transform-origin property.
~CSS~layout~boxが結付けられていない~SVG要素に対しては、 `content-box$vb 用の`使用値$は `fill-box$vb になる。 ◎ For SVG elements without associated CSS layout box, the used value for content-box is fill-box and for border-box is stroke-box.
~CSS~layout~boxが結付けられている要素に対しては、 `fill-box$vb 用の`使用値$は `content-box$vb になり,[ `stroke-box$vb / `view-box$vb ]用の`使用値$は `border-box$vb になる。 ◎ For elements with associated CSS layout box, the used value for fill-box is content-box and for stroke-box and view-box is border-box.
7. ~SVG `transform^a 属性
7.1. ~SVGの呈示~属性
`transform-origin$p ~CSS~propは、`呈示~属性$でもあり, `SVG2$r による既存の`呈示~属性$の~listを拡張する。 ◎ The transform-origin CSS property is also a presentation attribute and extends the list of existing presentation attributes [SVG2].
~SVG 2は、[ `transform$a / `patternTransform$a / `gradientTransform$a ]属性を`呈示~属性$として定義する — それらは、~CSS `transform$p ~propにより表現される。 `SVG2$r ◎ SVG 2 defines the transform, patternTransform, gradientTransform attributes as presentation attributes, represented by the CSS transform property [SVG2].
~CSS~cascadeにおける これらの関与は、~SVG仕様における`呈示~属性$の詳細度により決定される。 ~SVGに則って,~UAは、呈示~属性~用に, 新たな作者~stylesheetを — 一連の`作者~stylesheet$のうち最初のものになるように — 概念的に挿入する。 `SVG2$r ◎ The participation in the CSS cascade is determined by the specificity of presentation attributes in the SVG specification. According to SVG, user agents conceptually insert a new author style sheet for presentation attributes, which is the first in the author style sheet collection [SVG2].
`transform$p ~style~propと `transform$a 属性の組合せを示す例: ◎ This example shows the combination of the transform style property and the transform attribute.
<svg xmlns="http://www.w3.org/2000/svg"> <style> .container { transform: translate(100px, 100px); } </style> <g class="container" transform="translate(200 200)"> <rect width="100" height="100" fill="blue" /> </g> </svg>
~CSS~cascadeに関与することから、 `transform$p ~style~propは, `transform$a 呈示~属性を上書きする。 従って,容器は横と縦いずれの方向にも `200px^v ではなく `100px^v 並進される。 ◎ Because of the participation to the CSS cascade, the transform style property overrides the transform attribute. Therefore the container gets translated by 100px in both the horizontal and the vertical directions, instead of 200px.
7.2. ~SVG `transform$a 属性の構文
後方互換性の理由から、[ `transform$a / `patternTransform$a / `gradientTransform$a ]属性の構文は, `transform$p ~CSS~propの構文から相違する。 これらの属性には、~CSS `transform$p ~prop用に定義される追加の `transform-function$t 用の~supportは無い — 特定的には、これらの属性は[ `translateX$ft, `translateY$ft, `scaleX$ft, `scaleY$ft, `skew$ft ]を~supportしない。 ◎ For backwards compatibility reasons, the syntax of the transform, patternTransform, gradientTransform attributes differ from the syntax of the transform CSS property. For the attributes, there is no support for additional <transform-function>s defined for the CSS transform property. Specifically, <translateX()>, <translateY()>, <scaleX()>, <scaleY()> and <skew()> are not supported by the transform, patternTransform, gradientTransform attributes.
[ `transform$a / `patternTransform$a / `gradientTransform$a ]属性~用の値は、次の~listにて,~BNF( `Backus-Naur Form^en )を利用して定義される。 各項には、規範的でない線路図式も与えられる。 ~BNFでは、次の記法が利用される: ◎ The following list uses the Backus-Naur Form (BNF) to define values for the transform, patternTransform and gradientTransform attributes followed by an informative rail road diagram. The following notation is used:
- `*^c: 0 個~以上 ◎ *: 0 or more
- `+^c: 1 個~以上 ◎ +: 1 or more
- `?^c: 0 個か 1 個 ◎ ?: 0 or 1
- `()^c: ~group分け ◎ (): grouping
- `|^c: ~~選択肢どうしを分離する ◎ |: separates alternatives
- 二重引用符は~literalを括る。 ~literalは、[ `英字$, 左~丸括弧, 右~丸括弧 ]からなる。 `CSS-SYNTAX-3$r ◎ double quotes surround literals. Literals consists of letters [CSS-SYNTAX-3], left parenthesis and right parenthesis.
- `number-token$t は `CSS-SYNTAX-3$r により定義される。 ◎ <number-token> defined by the CSS Syntax module [CSS-SYNTAX-3].
注記: この構文は、各~UAにて実装された挙動を反映する — それは、 SVG 1.1 に定義される構文から相違する。 ◎ Note: The syntax reflects implemented behavior in user agents and differs from the syntax defined by SVG 1.1.
- 左~丸括弧 `(^c ◎ left parenthesis (
- `0028^U LEFT PARENTHESIS
- 右~丸括弧 `)^c ◎ right parenthesis )
- `0029^U RIGHT PARENTHESIS
- `comma@sf
- `002C^U COMMA
- `wsp@sf
- 次のいずれか ⇒# `000A^U LINE FEED, `000D^U CARRIAGE RETURN, `0009^U CHARACTER TABULATION, `0020^U SPACE ◎ Either a U+000A LINE FEED, U+000D CARRIAGE RETURN, U+0009 CHARACTER TABULATION, or U+0020 SPACE.
- `svg-wsp^dgm
- `comma-wsp@sf
(wsp+ comma? wsp*) | (comma wsp*)
- `svg-comma-wsp^dgm
- `translate@sf
"translate" wsp* "(" wsp* number ( comma-wsp? number )? wsp* ")"
- `svg-translate^dgm
- `scale@sf
"scale" wsp* "(" wsp* number ( comma-wsp? number )? wsp* ")"
- `svg-scale^dgm
- `rotate@sf
"rotate" wsp* "(" wsp* number ( comma-wsp? number comma-wsp? number )? wsp* ")"
- `svg-rotate^dgm
- `skewX@sf
"skewY" wsp* "(" wsp* number wsp* ")"
- `svg-skewX^dgm
- `skewY@sf
"skewY" wsp* "(" wsp* number wsp* ")"
- `svg-skewY^dgm
- `matrix@sf
"matrix" wsp* "(" wsp* number comma-wsp? number comma-wsp? number comma-wsp? number comma-wsp? number comma-wsp? number wsp* ")"
- `svg-matrix^dgm
- `transform@sf
matrix | translate | scale | rotate | skewX | skewY
- `svg-transform-function^dgm
- `transforms@sf
transform | transform comma-wsp transforms
- `svg-transforms^dgm
- `transform-list@sf
wsp* transforms? wsp*
- `svg-transform-list^dgm
7.3. ~SVG変形-関数
上の構文で定義される[ `transform$a / `patternTransform$a / `gradientTransform$a ]属性の~SVG変形-関数は、次に従って~CSS `transform-function$t に対応付けられる: ◎ SVG transform functions of the transform, patternTransform, gradientTransform attributes defined by the syntax above are mapped to CSS <transform-function>s as follows:
~SVG変形-関数 ◎ SVG transform function | ~CSS `transform-function$t | 追加の注記 ◎ Additional notes |
---|---|---|
`translate$sf | `translate$ft | 数値は、 `px$u 単位を伴う~CSS `length$t 型として解釈される。 ◎ Number values interpreted as CSS <length> types with px units. |
`scale$sf | `scale$ft | |
`rotate$sf | `rotate$ft | 引数を 1 個だけとるものに限られる。 数値は、 `deg$u 単位を伴う~CSS `angle$t 型として解釈される。 ◎ Only single value version. Number value interpreted as CSS <angle> type with deg unit. |
`skewX$sf | `skewX$ft | 数値は、 `deg$u 単位を伴う~CSS `angle$t 型として解釈される。 ◎ Number value interpreted as CSS <angle> type with deg unit. |
`skewY$sf | `skewY$ft | 数値は、 `deg$u 単位を伴う~CSS `angle$t 型として解釈される。 ◎ Number value interpreted as CSS <angle> type with deg unit. |
`matrix$sf | `matrix$ft |
~SVG変形-関数のうち, 3 個の値を伴う `rotate$sf は、対応する~CSS `transform-function$t には対応付けれない。 1 個目の数値 %a は `deg$u 単位を伴う~CSS `angle$t 型として解釈され,回転を定義する。 2 個目, 3 個目の数値 ( %cx, %cy ) は、省略可であり,順に[ 横, 縦 ]の並進~値を表現する — 両~数値とも `px$u 単位を伴う~CSS `length$t 型として解釈され,回転~用の原点を定義する。 この関数の挙動は、次を順に適用した結果と等価になる ⇒# ( %cx, %cy ) による並進, %a による回転, ( −%cx, −%cy ) による並進 ◎ The SVG transform function rotate with 3 values can not be mapped to a corresponding CSS <transform-function>. The 2 optional number values represent a horizontal translation value cx followed by a vertical translation value cy. Both number values get interpreted as CSS <length> types with px units and define the origin for rotation. The behavior is equivalent to an initial translation by cx, cy, a rotation defined by the first number value interpreted as <angle> type with deg unit followed by a translation by -cx, -cy.
~SVG `transform$a 属性は、 CSS Transition の[ `始~値^V / `終~値^V ]をとり得る。 `transform$a 属性の値が それらの値を与える場合、その `transform-list$sf 内に 3 個の値を伴う `rotate$sf 変形-関数が 1 つでも在るならば,[ 属性の値を成す各~SVG変形-関数を表現する行列を,同順に`乗算-$した結果の行列 ]を[ `matrix$ft ~CSS `transform-function$t に対応付けた結果 ]を[ `始~値^V / `終~値^V ]として利用し~MUST。 ◎ A transform attribute can be the start or end value of a CSS Transition. If the value of a transform attribute is the start or end value of a CSS Transition and the SVG transform list contains at least one rotate transform function with 3 values, the individual SVG transform functions must get post-multiplied and the resulting matrix must get mapped to a <matrix()> CSS <transform-function> and used as start/end value of the CSS Transition.
7.4. 利用元~空間
`pattern$e 要素に対しては、[ `patternTransform$a 属性, `transform$p ~prop ]が~pattern座標系における追加の変形を定義する。 詳細は `patternUnits$a 属性を見よ。 `SVG2$r ◎ For the pattern element, the patternTransform attribtue and transform property define an additional transformation in the pattern coordinate system. See patternUnits attribute for details [SVG2].
[ `linearGradient$e / `radialGradient$e ]要素に対しては、[ `gradientTransform$a 属性, `transform$p ~prop ]が,~gradient座標系における追加の変形を定義する。 詳細は `gradientUnits$a 属性を見よ。 `SVG2$r ◎ For the linearGradient and radialGradient elements, the gradientTransform attribtue and transform property define an additional transformation in the gradient coordinate system. See gradientUnits attribute for details [SVG2].
`clipPath$e 要素に対しては、[ `transform$a 属性, `transform$p ~prop ]が,~clipping-path座標~空間における追加の変形を定義する。 詳細は `clipPathUnits$a 属性を見よ。 `CSS-MASKING$r ◎ For the clipPath element, the transform attribtue and transform property define an additional transformation in the clipping path coordinate space. See clipPathUnits attribute for details [CSS-MASKING].
他のすべての`変形-可能$な要素に対しては、[ `transform$a 属性, `transform$p ~prop ]が親の現在の`利用元~座標系$における変形を定義する。 `transform$a 属性のすべての百分率~値は、要素の`基準~box$に相対的になる。 ◎ For all other transformable elements the transform attribute and transform property define a transformation in the current user coordinate system of the parent. All percentage values of the transform attribute are relative to the element’s reference box.
次の例の `pattern^e 上の `transform-origin$p ~propは、原点の横縦 次元に `50%^v の並進を指定する。 `transform$p ~propも並進を指定するが,絶対~長さである。 ◎ The transform-origin property on the pattern in the following example specifies a 50% translation of the origin in the horizontal and vertical dimension. The transform property specifies a translation as well, but in absolute lengths.
<svg xmlns="http://www.w3.org/2000/svg"> <style> pattern { transform: rotate(45deg); transform-origin: 50% 50%; } </style> <defs> <pattern id="pattern-1"> <rect id="rect1" width="100" height="100" fill="blue" /> </pattern> </defs> <rect width="200" height="200" fill="url(#pattern-1)" /> </svg>
~SVG `pattern$e 要素は限界~boxを持たないので、 `transform-origin$p ~propを相対的な値に解く際に,参照~元の `rect$e 要素の`基準~box$が代わりに利用される。 したがって原点は,`pattern$e 要素~内容の利用元~空間を回転させる前に,一時的に 100 画素だけ並進されることになる。 ◎ An SVG pattern element doesn’t have a bounding box. The reference box of the referencing rect element is used instead to solve the relative values of the transform-origin property. Therefore the point of origin will get translated by 100 pixels temporarily to rotate the user space of the pattern elements content.
7.5. `transform^a 属性~用の~SVG~DOM~interface
~SVG仕様では,~SVG~DOMにて~SVG[ `transform$a / `patternTransform$a / `patternTransform$a ]属性の~animate, および その`基底値$への~accessを供するための `SVGAnimatedTransformList$I ~interfaceが定義されている。 後方互換性を確保するため,この API は依然として~UAから~supportされ~MUST。 ◎ The SVG specification defines the "SVGAnimatedTransformList" interface in the SVG DOM to provide access to the animated and the base value of the SVG transform, gradientTransform and patternTransform attributes. To ensure backwards compatibility, this API must still be supported by user agents.
`baseVal^m により,作者は~SVG[ `transform$a / `patternTransform$a / `gradientTransform$a ]属性の値に~accessする/改変することが可能になる。 ~SVG~DOMに必要な後方互換性を供するため、 `baseVal^m は,この作者~stylesheetの値を反映し~MUST。 ~SVG~DOM~obj `baseVal^m に加えられるすべての改変は、即時にこの作者~stylesheetに反映され~MUST。 ◎ baseVal gives the author the possibility to access and modify the values of the SVG transform, patternTransform, gradientTransform attributes. To provide the necessary backwards compatibility to the SVG DOM, baseVal must reflect the values of this author style sheet. All modifications to SVG DOM objects of baseVal must affect this author style sheet immediately.
`animVal^m は, `transform$p ~propに算出される~styleを表現する。 したがって それには、適用されている CSS3 Transitions, CSS3 Animations, ~SVG~animation による効果もすべて含められる。 算出された~styleと~SVG~DOM~obj `animVal^m は、改変できない。 ◎ animVal represents the computed style of the transform property. Therefore it includes all applied CSS3 Transitions, CSS3 Animations or SVG Animations if any of those are underway. The computed style and SVG DOM objects of animVal can not be modified.
8. ~SVG~animation
8.1. `animate^e, `set^e 要素
この仕様は、 `animate$e, `set$e 要素が,~data型 `transform-list$t を~animateできるものと定める。 ◎ With this specification, the animate element and the set element can animate the data type <transform-list>.
`transform-list$t ~animationに特有の挙動から、加法的 `animate$e ~animation(後述)による効果は,下層値に対し — 加算するのではなく — `右から乗算-$することになる。 ◎ The animation effect is post-multiplied to the underlying value for additive animate animations (see below) instead of added to the underlying value, due to the specific behavior of <transform-list> animations.
【 下層値( `underlying value^en ) — 他の~animationを適用した結果の値 】【 右から(後ろから)乗算する( `post-multiply^en ) — 変形 %T を元の変形 %T0 に~~合成する — その結果、図形は, %T で変形されてから %T0 で変形されて表示に現れる。 対応する行列~演算においては,変形~行列により右から乗算することに対応する。 】
`from-to^b, `from-by^b, `by^b ~animationは、 SMIL の対応する `values^b ~animationに等価なものとして,定義される。 しかしながら, `to^b ~animationは、加法的/非~加法的 な挙動の混成になる。 `SMIL3$r ◎ From-to, from-by and by animations are defined in SMIL to be equivalent to a corresponding values animation. However, to animations are a mixture of additive and non-additive behavior [SMIL3].
【 参考: SMIL Animation 仕様によるこれらの~animationの定義の和訳 】
`animate$e 上の `to^b ~animationは、下層値から `to^a 属性~値への滑らかな変化を得るような特定の機能性を供する。 それは、加法的 変形-~animationに対し`右から乗算-$する要件と数学的に競合する。 ゆえに、 `animate$e 用の `to^b ~animationの挙動は定義されない。 作者には、欲される変形-~animationを得る際には, `from-to^b, `from-by^b, `by^b, `values^b ~animationの利用を勧める。 ◎ To animations on animate provide specific functionality to get a smooth change from the underlying value to the to attribute value, which conflicts mathematically with the requirement for additive transform animations to be post-multiplied. As a consequence, the behavior of to animations for animate is undefined. Authors are suggested to use from-to, from-by, by or values animations to achieve any desired transform animation.
`animate$e 要素~上の `calcMode$a 属性~用の値 `paced^v (定速)は、 `transform-list$t ~data型の~animationに対しては定義されない。 指定された場合、~UA は,代わりに値 `linear^v を選んでもよい。 この仕様の将来~versionは `transform-list$t 上で定速~animationをどう遂行するかを定義し得る。 ◎ The value "paced" is undefined for the attribute calcMode on animate for animations of the data type <transform-list>. If specified, UAs may choose the value "linear" instead. Future versions of this specification may define how paced animations can be performed on <transform-list>.
注記: 以下の段落は、[ `~animate可能な要素, 属性, ~prop$ `SVG11$r ]を拡張する。 ◎ Note: The following paragraphs extend Elements, attributes and properties that can be animated [SVG11].
この仕様により`呈示~属性$とされる[ `transform$a / `patternTransform$a / `gradientTransform$a / `transform-origin$p ]~propは、~animate可能とする。 ◎ The introduced presentation attributes transform, patternTransform, gradientTransform and transform-origin are animatable.
この仕様により、~SVG基本~data型 `transform-list$t は, `transform-function$t の~listに等価であるとされる。 `transform-list$t は,~animate可能かつ加法的である。 この~data型は~SVG `animate$e 要素と~SVG `set$e 要素を利用して~animateできる。 ~SVG~animationは, 変形-どうしの補間 節による手続きに従って走らせ~MUST。 ◎ With this specification the SVG basic data type <transform-list> is equivalent to a list of <transform-function>s. <transform-list> is animatable and additive. The data type can be animated using the SVG animate element and the SVG set element. SVG animations must run the same animation steps as described in section Transitions and Animations between Transform Values.
~data型 | 加法的? | `animate$e | `set$e | `animateColor$e | `animateTransform$e |
---|---|---|---|---|---|
`transform-list$t | yes | yes | yes | no | yes |
`animateTransform$e における加法的とは、基底の変形~列に対し,変形により`右から乗算-$することを意味する。 ◎ Additive for animateTransform means that a transformation is post-multiplied to the base set of transformations.
8.2. 加法における単位元
一部の~animationは、加法における単位元を要する。 変形-関数に対しては、これは値 0 の~scalarまたはその~listである。 変形-関数に対する単位元の例には,次のものが挙げられる:
- `translate(0)^v
- `scale(0)^v
- `rotate(0)^v
- `skewX(0)^v
- `skewY(0)^v
注記: この段落は、 `SMIL$r による要件と `SVG11$r に定義される拡張に力点を置いている。 この仕様は、上に挙げた以外の変形-関数~用には,単位元の定義は供さない。 ◎ Note: This paragraph focuses on the requirements of [SMIL] and the extension defined by [SVG11]. This specification does not provide definitions of neutral elements for the other transform functions than the functions listed above.
`by^b 値 %by を伴う `by^b ~animationは、 %O を[ ~animate対象の属性の値域に対する,加法の単位元 ]とするとき、[ %O, %by ]の 2 値からなる `values^b ~list, および[ `additive="sum"^a ]]による同じ~animation `SMIL3$r と等価である。 ◎ A by animation with a by value vb is equivalent to the same animation with a values list with 2 values, the neutral element for addition for the domain of the target attribute (denoted 0) and vb, and additive="sum". [SMIL3]
<rect width="100" height="100"> <animateTransform attributeName="transform" attributeType="XML" type="scale" by="1" dur="5s" fill="freeze"/> </rect>
`type="scale"^a を伴う `by^b ~animationを遂行する際の,加法における単位元は値 0 である。 従って,上の例に対する~animationでは、矩形は 0 秒の時点では不可視であり(~animateされる変形-~list値は `scale(0)^v になるので), 5 秒 経過後に,拡縮されて元の~sizeに戻される(~animateされる変形-~list値は `scale(1)^v になるので)。 ◎ The neutral element for addition when performing a by animation with type="scale" is the value 0. Thus, performing the animation of the example above causes the rectangle to be invisible at time 0s (since the animated transform list value is scale(0)), and be scaled back to its original size at time 5s (since the animated transform list value is scale(1)).
8.3. ~SVG `attributeName^a 属性
SVG 1.1 ~animation では、~animateされる属性の名前を指定するための `attributeName$a 属性が定義されている( SVG2 では `attributeName^a )。 `呈示~属性$である `gradientTransform$a / `patternTransform$a に対しては、代わりに `transform^v を値に利用することもできる。 同じ `transform$p ~propが~animateされることになる。 ◎ SVG 1.1 Animation defines the "attributeName" attribute to specify the name of the target attribute. For the presentation attributes gradientTransform and patternTransform it will also be possible to use the value transform. The same transform property will get animated.
この例では、[ 線型~gradientによる~gradient変形 ]が~animateされる。 ◎ In this example the gradient transformation of the linear gradient gets animated.
<linearGradient gradientTransform="scale(2)"> <animate attributeName="gradientTransform" from="scale(2)" to="scale(4)" dur="3s" additive="sum" /> <animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)" dur="3s" additive="sum" /> </linearGradient>
`linearGradient$e 要素には,呈示~属性 `gradientTransform$a が指定されている。 2 つの `animate$e 要素は、~animateする対象の属性として,それぞれ `gradientTransform$a, `transform$a を指すが、両~animationとも, `gradientTransform$a 呈示~属性から値を得た上で,同じ~gradient変形に対し適用される — 1 個目の~animationによる拡縮法が適用されてから, 2 個目の~animationによる並進が適用される。 ◎ The linearGradient element specifies the gradientTransform presentation attribute. The two animate elements address the target attribute gradientTransform and transform. Even so all animations apply to the same gradient transformation by taking the value of the gradientTransform presentation attribute, applying the scaling of the first animation and applying the translation of the second animation one after the other.
9. 変形-関数
`transform$p ~propの値は `transform-function@t の~listである。 許容される変形-関数の集合は以下に与えられる。 以下の各種~関数における `zero$t は `0deg^v と同じに挙動する(“単位無し 0” 角度は 旧来との互換性の理由から保全される)。 並進~用の[ 横/縦 ]の `percentage$t 値は,`基準~box$の[ 横幅/縦幅 ]に相対的になる。 ◎ The value of the transform property is a list of <transform-function>. The set of allowed transform functions is given below. In the following functions, a <zero> behaves the same as 0deg ("unitless 0" angles are preserved for legacy compat). A percentage for horizontal translations is relative to the width of the reference box. A percentage for vertical translations is relative to the height of the reference box.
9.1. ~2D変形-関数
- `matrix@f = matrix( `number$t [, `number$t ]{5,5} )
- 所与の 6 個の成分値による`~2D~3x2行列$の`変形~行列$で表現される,~2D変形を指定する。 ◎ specifies a 2D transformation in the form of a transformation matrix of the six values a, b, c, d, e, f.
- `translate@f = translate( `length-percentage$t [, `length-percentage$t ]? )
- %tx, %ty を所与の順による `length-percentage^t 値とするとき、移動量~vector [ %tx, %ty ] による,`~2D並進$を指定する。 %ty は省略可であり、供されていない場合は 0 と見なされる。 ◎ specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.
- `translateX@f = translateX( `length-percentage$t )
- 所与の `length-percentage^t 値による, X 方向の`~2D並進$を指定する。 ◎ specifies a translation by the given amount in the X direction.
- `translateY@f = translateY( `length-percentage$t )
- 所与の `length-percentage^t 値による, Y 方向の`~2D並進$を指定する。 ◎ specifies a translation by the given amount in the Y direction.
- `scale@f = scale( `number$t [, `number$t ]? )
- %sx, %sy をそれぞれ,所与の順による `number^t 値とするとき、拡縮率~vector [ %sx, %sy ] による,`~2D拡縮$を指定する。 %sy は省略可であり、供されていない場合は %sy と同じ値と見なされる。 例えば `scale(1, 1)^v は 要素を変形しないが, `scale(2, 2)^v は X, Y 両~軸に 2 倍の~~長さに(すなわち 面積を 4 倍に)する。 ◎ specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X and Y axes, or four times its typical geometric size.
- `scaleX@f = scaleX( `number$t )
- %sx を所与の `number^t 値とするとき、拡縮率~vector [ %sx, 1 ] による,`~2D拡縮$を指定する。 ◎ specifies a 2D scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
- `scaleY@f = scaleY( `number$t )
- %sy を所与の `number^t 値とするとき、拡縮率~vector [ 1, %sx ] による,`~2D拡縮$を指定する。 ◎ specifies a 2D scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
- `rotate@f = rotate( [ `angle$t | `zero$t ] )
- `transform-origin$p ~propにより定義される[ 要素の原点 ]を中心とする, 回転角 `angle^t による,`~2D回転$を指定する。 例えば `rotate(90deg)^v は、要素は,時計回りに 90° 回転されて現れることになる。 ◎ specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
- `skew@f = skew( [ `angle$t | `zero$t ] [, [ `angle$t | `zero$t ] ]? )
- %ax, %ay を所与の順による `angle^t 値とするとき、 [ %ax, %ay ] による, X 軸, Y 軸~用の`~2D斜傾$を指定する。 %ay は省略可であり、供されていない場合は 0 と見なされる。 ◎ specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not provided, it has a zero value.
- `skew$f は、互換性の理由から存在し,新たな内容には利用されるべきでない。 代わりに `skewX$f / `skewY$f を利用するように。 `skew^f の挙動は、 `skewX^f と `skewY^f の積とは異なることに注意。 ◎ skew() exists for compatibility reasons, and should not be used in new content. Use skewX() or skewY() instead, noting that the behavior of skew() is different from multiplying skewX() with skewY().
- `skewX@f = skewX( [ `angle$t | `zero$t ] )
- 所与の角度による, `X 軸~不変の~2D斜傾$を指定する。 【 所与の角度だけ Y 軸が傾くように, X 座標を Y 座標に比例する量だけずらす( “skew” する)。 】 ◎ specifies a 2D skew transformation along the X axis by the given angle.
- `skewY@f = skewY( [ `angle$t | `zero$t ] )
- 所与の角度による, `Y 軸~不変の~2D斜傾$を指定する。 【 所与の角度だけ Y 軸が傾くように, Y 座標を X 座標に比例する量だけずらす( “skew” する)。】 ◎ specifies a 2D skew transformation along the Y axis by the given angle.
9.2. 原始関数とその派生
一部の変形-関数は、より汎用的な変形-関数の特殊な場合として表現できる。 後者は ~~原始関数( `primitive transform functions^en, または単に `primitive^en ),前者はその ~~派生関数( `derived transform function^en )と呼ばれる。 ~2Dにおける原始関数と, その派生関数は: ◎ Some transform functions can be represented by more generic transform functions. These transform functions are called derived transform functions, and the generic transform functions are called primitive transform functions. Two-dimensional primitives and their derived transform functions are:
原始関数 | 派生関数 |
---|---|
`translate$f | `translateX$f, `translateY$f, `translate$f ◎ for <translateX()>, <translateY()> and <translate()>. |
`scale$f | `scaleX$f, `scaleY$f, `scale$f ◎ for <scaleX()>, <scaleY()> and <scale()>. |
10. 変形-関数の~list
`transform-function$t の~listが供された場合、その正味の効果は,各~変形-関数が供された順序により別々に指定されていたかのようになる。 ◎ If a list of <transform-function>s is provided, then the net effect is as if each transform function had been specified separately in the order provided. If a list of <transform-function>
すなわち,他の[ 位置や寸法に影響する~style付け ]が不在の下では、一連の入子にされた変形-は,[ 先祖の座標系から要素の局所~座標系に適用される変形-関数【?】 ]からなる,単独の~listに等価になる。 結果の変形-は、変形-の~listにより与えられる各~行列の積になる。 ◎ That is, in the absence of other styling that affects position and dimensions, a nested set of transforms is equivalent to a single list of transform functions, applied from the coordinate system of the ancestor to the local coordinate system of a given element. The resulting transform is the matrix multiplication of the list of transforms.
例えば: ◎ For example,
<div style="transform: translate(-10px, -20px) scale(2) rotate(45deg)"/>
は、機能的に次に等価になる: ◎ is functionally equivalent to:
<div style="transform: translate(-10px, -20px)" id="root"> <div style="transform: scale(2)"> <div style="transform: rotate(45deg)"> </div> </div> </div>
変形-関数が表現する ~objに対する`現在の変形~行列$が,不可逆である場合、その~objやその内容は表示されなくなる。 ◎ If a transform function causes the current transformation matrix of an object to be non-invertible, the object and its content do not get displayed.
次の例における~objは, 0 倍に拡縮される: ◎ The object in the following example gets scaled by 0.
<style> .box { transform: scale(0); } </style> <div class="box"> Not visible </div>
この拡縮法は、`div^e ~boxの座標~空間~用の`現在の変形~行列$を不可逆にする。 したがって、 `div^e ~boxもその中の~textも表示されない。 ◎ The scaling causes a non-invertible CTM for the coordinate space of the div box. Therefore neither the div box, nor the text in it get displayed.
11. 変形-~間の補間
変形-を~animate/遷移させている間、変形-関数の~listが補間され~MUST。 変形-の 2 つの状態, %from と %to の補間においては、以下に述べる規則が適用される。 ◎ When animating or transitioning transforms, the transform function lists must be interpolated. For interpolation between one transform from-transform and a second transforms to-transform, the rules described below are applied.
- %from, %to いずれも `none^v の場合 ◎ If both the from- and to-transform are none:
- 補間は不要であり、算出値は `none^v のままになる。 ◎ There is no interpolation necessary. The computed value stays none.
- %from, %to の片方のみが `none^v の場合 ◎ If one of the from- or to-transforms is none:
- その `none^v 値を,もう片方の変形-関数の~listに呼応するような,`恒等~変形-関数$の~listに置換した上で、次項の規則に従って,両者の変形-関数~listを補間する。 ◎ The value none is replaced by an equivalent identity transform function list for the corresponding transform function list. Both transform function lists get interpolated following the next rule.
- 例えば, %from が `scale(2)^v で %to が `none^v の場合、~animationは,後者が `scale(1)^v に置換された上で 続行されることになる 。 同様に、 %from が `none^v で %to が `scale(2) rotate(50deg)^v の場合、~animationは,前者が `scale(1) rotate(0)^v であったかのように 実行されることになる。 ◎ For example, if from-transform is scale(2) and to-transform is none then the value scale(1) will be used for to-transform and animation will proceed using the next rule. Similarly, if from-transform is none and to-transform is scale(2) rotate(50deg) then the animation will execute as if from-transform is scale(1) rotate(0).
- [ %from と %to は同じ個数の変形-関数からなる ], かつ[ 対応する変形-関数の対が[ 同じ名前を持つ, または 同じ `原始関数$ からの派生である ]]場合: ◎ If from- and to-transform have the same number of transform functions, each transform function pair has either the same name, or is a derivative of the same primitive:
- `変形-関数の補間$にて述べられるように、各~変形-関数の対を補間する。 その結果の変形-関数の~listが,算出値になる。 ◎ Interpolate each transform function pair as described in Interpolation of transform functions. The computed value is the resulting transform function list.
- 例えば, %from が `scale(1) translate(0)^v で %to が `translate(100px) scale(2)^v の場合、 `scale(1)^v と `translate(100px)^v (あるいは `translate(0)^v と `scale(2)^v )は,共通の`原始関数$から派生しないので、この規則による補間は 行われ得ない。 ◎ For example, if from-transform is scale(1) translate(0) and to-transform is translate(100px) scale(2) then scale(1) and translate(100px) as well as translate(0) and scale(2) don’t share a common primitive and therefore can not get interpolated following this rule.
- [ %from と %to は異なる個数の変形-関数からなる ], かつ[ 長い方の変形-関数~listの尾部を 短い方と同じ長さになるよう切り落としたときに,前項と同じ条件を満たす ]場合: ◎ If from- and to-transform have a different number of transform functions, and the functions of the shorter transform list have either the same name, or are derivatives of the same primitive of the function at the equivalent position in the longer list:
- 短い方の変形-関数~listの末尾に,長い方と同じ長さになるよう 何個かの恒等~変形-関数を加えた上で、前項と同様に補間する。 ◎ Extend the shorter list to the length of the longer list, setting the function at each additional position to the identity transform function matching the function at the equivalent position in the longer list. ◎ Interpolate each transform function pair as described in Interpolation of transform functions. The computed value is the resulting transform function list.
- 例えば, %from が `scale(1.5)^v で %to が `scale(1.5) rotate(720deg)^v の場合、 %from には `scale(1.5) rotate(0deg)^v が指定されていたかのように補間する。 ◎ For example, if from-transform is scale(1.5) and to-transform is scale(1.5) rotate(720deg), it interpolates as if the from-transform were specified as scale(1.5) rotate(0deg).
- 他の場合: ◎ In all other cases:
- %from, %to のそれぞれに対し,その変形-関数~listの各~変形-関数で`右から乗算-$して~4x4行列に換算する。 それぞれの行列は、`行列の補間$による指示書きに従って,補間される。 算出値は、それを表現する `matrix$ft になる。 ◎ The transform functions of each transform function list on the from- and to-transform get post-multiplied and converted into 4x4 matrices. Each of the matrices gets interpolated following the instructions in Interpolation of matrices. The computed value is the transform function <matrix()>.
一部の~animationにおいては,変形~行列が特異的 — 言い換えれば不可逆になる。 例えば,拡縮率が 1 から −1 へ変動する~animationなど。 行列がその種の状態に陥った時点では、`変形d要素$は描画されない。 ◎ In some cases, an animation might cause a transformation matrix to be singular or non-invertible. For example, an animation in which scale moves from 1 to -1. At the time when the matrix is in such a state, the transformed element is not rendered.
12. 原始関数と派生関数の補間
同じ名前の 同じ個数の引数を伴う 2つの変形-関数は、前節による換算を要することなく,数値的に補間できる。 その計算結果の値は、同じ個数の引数を伴う同じ型の変形-関数になる。 `matrix$ft については、特別な規則が適用される: ◎ Two transform functions with the same name and the same number of arguments are interpolated numerically without a former conversion. The calculated value will be of the same transform function type with the same number of arguments. Special rules apply to <matrix()>.
2 つの変形-関数 `translate(0)^v, `translate(100px)^v は、同じ型であり, 引数の個数も同じなので,数値的に補間できる。 `translateX(100px)^v や `translate(100px, 0)^v は,それらとは 型が異なる/引数の個数が異なるので、それらの変形-関数と補間するためには,その前に前節による換算を要する。 ◎ The two transform functions translate(0) and translate(100px) are of the same type, have the same number of arguments and therefore can get interpolated numerically. translateX(100px) is not of the same type and translate(100px, 0) does not have the same number of arguments, therefore these transform functions can not get interpolated without a former conversion step.
2 つの変形-関数は、型が異っていても,同じ原始関数から派生しているならば、補間できる。 あるいは、引数の個数が異なっていても,型が同じならば、補間できる。 いずれにせよ,両 ~変形-関数は、まず前節による共通の原始関数への換算を要する — しかる後,数値的に補間される。 算出値は、補間した結果の引数を伴う原始関数になる。 ◎ Two different types of transform functions that share the same primitive, or transform functions of the same type with different number of arguments can be interpolated. Both transform functions need a former conversion to the common primitive first and get interpolated numerically afterwards. The computed value will be the primitive with the resulting interpolated arguments.
次の例は、`div^e ~box上で~hoverされている間, 3 秒間かけて `translateX(100px)^v から `translateY(100px)^v へ遷移させる。 いずれの変形-関数も,同じ原始関数 `translate$f から派生するので、補間が可能になる。 ◎ The following example describes a transition from translateX(100px) to translateY(100px) in 3 seconds on hovering over the div box. Both transform functions derive from the same primitive translate() and therefore can be interpolated.
div { transform: translateX(100px); } div:hover { transform: translateY(100px); transition: transform 3s; }
遷移が生じたとき、両~変形-関数は,共通の原始関数に変形される。 `translateX(100px)^v は `translate(100px, 0)^v に換算され、 `translateY(100px)^v は `translate(0, 100px)^v に換算される。 しかる後、両~変形-関数は,数値的に補間できるようになる。 ◎ For the time of the transition both transform functions get transformed to the common primitive. translateX(100px) gets converted to translate(100px, 0) and translateY(100px) gets converted to translate(0, 100px). Both transform functions can then get interpolated numerically.
両~変形-関数が,~2D原始関数を共有する場合、それらは~2D原始関数に換算される。 いずれかが~3D変形-関数である場合、共通の~3D原始関数が利用される。 ◎ If both transform functions share a primitive in the two-dimensional space, both transform functions get converted to the two-dimensional primitive. If one or both transform functions are three-dimensional transform functions, the common three-dimensional primitive is used.
この例では、~2D~変形-関数が~3D~変形-関数にされた上で,~animateされる。 共通の原始関数は `translate3d$f になる。 ◎ In this example a two-dimensional transform function gets animated to a three-dimensional transform function. The common primitive is translate3d().
div { transform: translateX(100px); } div:hover { transform: translateZ(100px); transition: transform 3s; }
最初の `translateX(100px)^v は `translate3d(100px, 0, 0)^v に換算され、 `translateZ(100px)^v は `translate3d(0, 0, 100px)^v に換算される。 換算された両~変形-関数は,数値的に補間される。 ◎ First translateX(100px) gets converted to translate3d(100px, 0, 0) and translateZ(100px) to translate3d(0, 0, 100px) respectively. Then both converted transform functions get interpolated numerically.
13. 行列どうしの補間
2 つの行列の合間を補間するためには:
- まず、それぞれの行列を[ 並進, 回転, 拡縮, 斜傾 ]に分解する。
- 次に、この 2 つの分解形を成している対応する行列どうしを,数値的に補間する。
- 最後に、結果の一連の行列を, 1 つの行列に再合成する。
次の例では、~hoverされている間に,要素を X, Y 両方向に 100 画素~並進させた上で, 1170° 回転させる。 初期~時の変形は 45° 回転にされていて,遷移を利用して~animateされる。 作者は、時計回りに, 3 +四半周( 1170° )回転するものと期待するかもしれないが… ◎ In the following example the element gets translated by 100 pixel in both the X and Y directions and rotated by 1170° on hovering. The initial transformation is 45°. With the usage of transition, an author might expect a animated, clockwise rotation by three and a quarter turns (1170°).
<style> div { transform: rotate(45deg); } div:hover { transform: translate(100px, 100px) rotate(1215deg); transition: transform 3s; } </style> <div></div>
[ 始値~変形-: `rotate(45deg)^v ]に含まれる変形-関数の個数は,[ 終値~変形-: `translate(100px, 100px) rotate(1125deg)^v ]に含まれる変形-関数の個数と異なるので、`変形-の補間$の最後の規則に従って,両~変形-とも 行列~補間により補間され~MUST。 その結果、変形~関数から行列への換算の際に, 3 周分( 1080° )についての情報は失われ、要素は四半周( 90° )だけ回転される。 ◎ The number of transform functions on the source transform rotate(45deg) differs from the number of transform functions on the destination transform translate(100px, 100px) rotate(1125deg). According to the last rule of Interpolation of Transforms, both transforms must be interpolated by matrix interpolation. With converting the transformation functions to matrices, the information about the three turns gets lost and the element gets rotated by just a quarter turn (90°).
上の例で 3 +四半周を得るためには、[ 始値~変形-と終値~変形- ]が[ `変形-の補間$の 3 個目の規則 ]を満たすように、始値~変形-を,次の様な形にする必要がある: `translate(0, 0) rotate(45deg)^v 。 ◎ To achieve the three and a quarter turns for the example above, source and destination transforms must fulfill the third rule of Interpolation of Transforms. Source transform could look like translate(0, 0) rotate(45deg) for a linear interpolation of the transform functions.
以下では、 2 つの~2D行列の補間 と,片方は`~2D行列$でない 2 つの行列の補間を別々に扱う。 ◎ In the following we differ between the interpolation of two 2D matrices and the interpolation of two matrices where at least one matrix is not a 2D matrix.
補間~対象のいずれかの行列が不可逆である場合、利用される~animation関数は、当該の~animation仕様の規則に則って,離散的~animationに~fall-backし~MUST。 ◎ If one of the matrices for interpolation is non-invertible, the used animation function must fall-back to a discrete animation according to the rules of the respective animation specification.
13.1. 補助関数
以下の節における疑似codeでは、次の補助関数が利用される: ◎ The pseudo code in the next subsections make use of the following supporting functions:
値~型[ double, point, matrix, vector ]は,順に[ ~scalar, 3 成分~vector, ~4x4行列, 4 成分~vector ]を表す。 ◎ Supporting functions (point is a 3 component vector, matrix is a 4x4 matrix, vector is a 4 component vector):
double determinant(matrix) | 行列式 |
matrix inverse(matrix) | 逆行列 |
matrix transpose(matrix) | 転置行列 |
matrix multiply(matrix, matrix) | 行列の乗算 |
point multVecMatrix(point, matrix) | ~vectorを行列で乗算する(写像する)。 |
double length(point) | ~vectorの~~長さ |
point normalize(point) | ~vectorを~~長さ 1 に正規化する |
double dot(point, point) | 2 個の~vectorの点乗積 |
double sqrt(double) | ~scalarの二乗根 |
double max(double, double) | 2 個の~scalarの最大値 |
double dot(vector, vector) | 2 個の~vectorの点乗積 |
vector multVector(vector, vector) | 2 個の~vectorの積【利用されていない】 |
double cos(double) | 余弦 |
double sin(double) | 正弦 |
double acos(double) | 逆余弦 |
double abs(double) | 絶対~値 |
double rad2deg(double) | ~radianを度数に換算する |
double deg2rad(double) | 度数を~radianに換算する |
point combine(point, point, double, double) | 下を見よ( ~3D行列~分解にて利用される) |
point combine(point %a, point %b, double %ascl, double %bscl) %result[0] = (%ascl * %a[0]) + (%bscl * %b[0]) %result[1] = (%ascl * %a[1]) + (%bscl * %b[1]) %result[2] = (%ascl * %a[2]) + (%bscl * %b[2]) return %result
Supporting functions (point is a 3 component vector, matrix is a 4x4 matrix, vector is a 4 component vector):
double determinant(matrix) returns the 4x4 determinant of the matrix
matrix inverse(matrix) returns the inverse of the passed matrix
matrix transpose(matrix) returns the transpose of the passed matrix
point multVecMatrix(point, matrix) multiplies the passed point by the passed matrix
and returns the transformed point
double length(point) returns the length of the passed vector
point normalize(point) normalizes the length of the passed point to 1
double dot(point, point) returns the dot product of the passed points
double sqrt(double) returns the root square of passed value
double max(double y, double x) returns the bigger value of the two passed values
double dot(vector, vector) returns the dot product of the passed vectors
vector multVector(vector, vector) multiplies the passed vectors
double sqrt(double) returns the root square of passed value
double max(double y, double x) returns the bigger value of the two passed values
double min(double y, double x) returns the smaller value of the two passed values
double cos(double) returns the cosines of passed value
double sin(double) returns the sine of passed value
double acos(double) returns the inverse cosine of passed value
double abs(double) returns the absolute value of the passed value
double rad2deg(double) transforms a value in radian to degree and returns it
double deg2rad(double) transforms a value in degree to radian and returns it
Decomposition also makes use of the following function:
point combine(point a, point b, double ascl, double bscl)
result[0] = (ascl * a[0]) + (bscl * b[0])
result[1] = (ascl * a[1]) + (bscl * b[1])
result[2] = (ascl * a[2]) + (bscl * b[2])
return result
13.2. ~2D行列どうしの補間
13.2.1. ~2D行列の分解-法
以下の疑似codeは “Graphics Gems II, edited by Jim Arvo” による “unmatrix” 手法に基づく: ◎ The pseudo code below is based upon the "unmatrix" method in "Graphics Gems II, edited by Jim Arvo".
疑似codeにおける行列は、列主導順【列単位からなる配列】を利用する。 行列~~成分の 1, 2 個目の~indexは、順に ~column, ~row のそれを表現する。 ◎ Matrices in the pseudo code use the column-major order. The first index on a matrix entry represents the column and the second index represents the row.
入力: %matrix ; ~4x4行列 出力: %translate ; 2 成分~vector %scale ; 2 成分~vector %angle ; 回転 %m11, %m12, %m21, %m22 ; 2x2 行列の各~成分 `行列の分解が[ 可能なら true / 不能なら false ]を返す。^cmt double %row0x = %matrix[0][0] double %row0y = %matrix[0][1] double %row1x = %matrix[1][0] double %row1y = %matrix[1][1] %translate[0] = %matrix[3][0] %translate[1] = %matrix[3][1] %scale[0] = sqrt(%row0x * %row0x + %row0y * %row0y) %scale[1] = sqrt(%row1x * %row1x + %row1y * %row1y) `行列式が負の場合は,一方の軸を反転する^cmt double %determinant = %row0x * %row1y - %row0y * %row1x if (%determinant < 0) { `小さい方の単位~vector点乗積により,軸を反転する^cmt if (%row0x < %row1y) { %scale[0] = -%scale[0] } else { %scale[1] = -%scale[1] } } `行列から拡縮~分を除去して正規化する^cmt if (%scale[0]) { %row0x *= 1 / %scale[0] %row0y *= 1 / %scale[0] } if (%scale[1]) { %row1x *= 1 / %scale[1] %row1y *= 1 / %scale[1] } `回転を算出して行列を再度~正規化する^cmt %angle = atan2(%row0y, %row0x); if (%angle) { // -%angle 回転 = [cos(%angle), sin(%angle), -sin(%angle), cos(%angle)] // = [%row0x, -%row0y, %row0y, %row0x] // Thanks to the normalization above. double %sn = -%row0y double %cs = %row0x double %m11 = %row0x double %m12 = %row0y double %m21 = %row1x double %m22 = %row1y %row0x = %cs * %m11 + %sn * %m21 %row0y = %cs * %m12 + %sn * %m22 %row1x = -%sn * %m11 + %cs * %m21 %row1y = -%sn * %m12 + %cs * %m22 } %m11 = %row0x %m12 = %row0y %m21 = %row1x %m22 = %row1y `回転~関数~用に度数に換算する^cmt %angle = rad2deg(%angle) return true
13.2.2. 分解形~2D行列~値どうしの補間
2 個の分解形~2D行列~値を補間する前に,次を行う: ◎ Before two decomposed 2D matrix values can be interpolated, the following
入力: %translationA ; 2 成分~vector %scaleA ; 2 成分~vector %angleA ; 回転 %mA11, %mA12, %mA21, %mA22 ; 2x2 行列の各~成分 %translationB ; 2 成分~vector %scaleB ; 2 成分~vector %angleB ; 回転 %mB11, %mB12, %mB21, %mB22 ; 2x2 行列の各~成分 `一方の x-軸と他方の y-軸が反転されている場合、回転を反転されていない形に戻す。^cmt if ((%scaleA[0] < 0 && %scaleB[1] < 0) || (%scaleA[1] < 0 && %scaleB[0] < 0)) %scaleA[0] = -%scaleA[0] %scaleA[1] = -%scaleA[1] %angleA += %angleA < 0 ? 180 : -180 `回転は弧が短い方を選ぶ^cmt if (!%angleA) %angleA = 360 if (!%angleB) %angleB = 360 if (abs(%angleA - %angleB) > 180) if (%angleA > %angleB) %angleA -= 360 else %angleB -= 360
以下、始値~行列を分解して得られた各~成分~値[ 並進, 拡縮, 角度, [ `11^M 〜 `22^M ] ]は、対応する終値~行列の各~成分との間で,線型に補間される。 ◎ Afterwards, each component of the decomposed values translation, scale, angle, m11 to m22 of the source matrix get linearly interpolated with each corresponding component of the destination matrix.
13.2.3. ~2D行列への再合成-法
補間~後の結果の値が,要素の利用元~空間を変形するときに利用される。 これらの値は~4x4行列に再合成するために利用される。 これは、次の疑似codeにより行える: ◎ After interpolation, the resulting values are used to transform the elements user space. One way to use these values is to recompose them into a 4x4 matrix. This can be done following the pseudo code below:
入力: %translate ; 2 成分~vector %scale ; 2 成分~vector %angle ; 回転 %m11, %m12, %m21, %m22 ; 2x2 行列の各~成分 出力: %matrix ; 単位行列に初期化された~4x4行列 %matrix[0][0] = %m11 %matrix[0][1] = %m12 %matrix[1][0] = %m21 %matrix[1][1] = %m22 `並進~行列^cmt %matrix[3][0] = %translate[0] * %m11 + %translate[1] * %m21 %matrix[3][1] = %translate[0] * %m12 + %translate[1] * %m22 `回転~行列^cmt %angle = deg2rad(%angle); double %cosAngle = cos(%angle); double %sinAngle = sin(%angle); `単位行列に初期化された,~4x4行列による新たな一時変数 rotateMatrix^cmt %rotateMatrix[0][0] = %cosAngle %rotateMatrix[0][1] = %sinAngle %rotateMatrix[1][0] = -%sinAngle %rotateMatrix[1][1] = %cosAngle %matrix = post-multiply(%rotateMatrix, %matrix) `matrix を拡縮^cmt %matrix[0][0] *= %scale[0] %matrix[0][1] *= %scale[0] %matrix[1][0] *= %scale[1] %matrix[1][1] *= %scale[1]
14. ~変形-関数の数学的~記述
すべての変形-関数は、次のような形の~4x4変形~行列として数学的に表現できる: ◎ Mathematically, all transform functions can be represented as 4x4 transformation matrices of the following form:
【 この仕様における行列は、座標を~~縦~vectorと見なして左から作用し、子の局所~座標系から親の局所~座標系への変形を与える。 】【 ~3D空間の点 ( %x, %y, %z ) ( ~2D空間の場合は %z ~EQ 0 )は、~~縦~vector ( %x, %y, %z, 1 ) と同一視される。 】
行列~上の並進の 1 単位は、要素の局所~座標系の 1 画素に等価になる。 ◎ One translation unit on a matrix is equivalent to 1 pixel in the local coordinate system of the element.
-
6 成分 %a, %b, %c, %d, %e, %f からなる `~2D~3x2行列@ は、次の行列に等価になる: ◎ A 2D 3x2 matrix with six parameters a, b, c, d, e and f is equivalent to the matrix:
-
移動量 [ %tx, %ty ] による `~2D並進@ は、移動量 [ %tx, %ty, 0 ] による`~3D並進$(すなわち,次の行列)に等価になる:
◎ A 2D translation with the parameters tx and ty is equivalent to a 3D translation where tz has zero as a value. -
拡縮率 [ %sx, %sy ] による `~2D拡縮@ は、拡縮率 [ %sx, %sy, 1 ] による`~3D拡縮$(すなわち,次の行列)に等価になる:
◎ A 2D scaling with the parameters sx and sy is equivalent to a 3D scale where sz has one as a value. -
回転角 %α による `~2D回転@ は、軸~vector [ 0, 0, 1 ] と回転角 %α による`~3D回転$(すなわち,次の行列)に等価になる:
◎ A 2D rotation with the parameter alpha is equivalent to a 3D rotation with vector [0,0,1] and parameter alpha. -
~parameter %α, %β による ~2D斜傾~的な変形は、次の行列に等価になる: ◎ A 2D skew like transformation with the parameters alpha and beta is equivalent to the matrix:
-
角度 %α による `X 軸~不変の~2D斜傾@ は、次の行列に等価になる: ◎ A 2D skew transformation along the X axis with the parameter alpha is equivalent to the matrix:
-
角度 %β による `Y 軸~不変の~2D斜傾@ は、次の行列に等価になる: ◎ A 2D skew transformation along the Y axis with the parameter beta is equivalent to the matrix:
15. ~privacyと~security上の考慮点
~UAは、[ 攻撃者が、情報を推定して 計時~攻撃を仕掛ける ]ことができない仕方で,変形-演算を実装し~MUST。 ◎ UAs must implement transform operations in a way attackers can not infer information and mount a timing attack.
計時~攻撃は、[ 演算にかかる時間を学習する ]ことに基づいて,[ さもなければ保護されるような,内容についての情報 ]を得る手法である。 ◎ A timing attack is a method of obtaining information about content that is otherwise protected, based on studying the amount of time it takes for an operation to occur.
現時点では、[ この仕様に特有の,~privacyや~securityの懸念 ]についての情報は無い。 ◎ At this point there are no information about potential privacy or security concerns specific to this specification.
最新の発行からの変更点
2017 年 11 月 30 日 作業草案 からの変更点は: ◎ The following changes were made since the 30 November 2017 Working Draft.
- 呈示~属性[ `patternTransform$a, `gradientTransform$a ]は `transform$p ~propを表現するものと指定していた~textを除去した。 それは、 `SVG2$r にて指定されることになる。 ◎ Remove specification text that makes patternTransform, gradientTransform presentation attributes representing the transform property. That is going to get specified by SVG 2 [SVG2].
- ~privacyと~security 節を追加した。 ◎ Added privacy and security section.
- `変形-可能$な要素~用に `SVG2$r の定義を利用するようにした。 ◎ Use [SVG2] definitions for transformable elements.
- [ `transform$a / `patternTransform$a / `gradientTransform$a ]属性~用に特別な構文を追加した。 ◎ Added special syntax for transform, gradientTransform and patternTransform attributes.
- [ `右から乗算-$/`左から乗算-$ ]を用いて乗算~順序を明確化した。 ◎ Clarify multiplication order by using terms post-multiply and pre-multiply.
- 疑似codeにおける行列~~成分の~index順序を明確化した。 ◎ Clarify index order of matrix entries in pseudo-code.
- 行列を組成し直す疑似codeにおける乗算~順序を明確化した。 ◎ Clarify multiplication order in recomposition pseudo-code.
- ~overflow区画~上での `transform$p の挙動を明確化した。 ◎ Clarify behavior of transform on overflow area.
- 単位元の~listから[ `translateX(0)^v, `translateY(0)^v, `scaleX(0)^v, `scaleY(0)^v ]を除去した。 ◎ Remove translateX(0), translateY(0), scaleX(0), scaleY(0) from the list of neutral elements.
- 変形-関数~定義から~3D変形への参照を除去した。 ◎ Remove any reference of 3D transformations of transform function definitions.
- 長さが異なる `transform-list$t どうしの補間も許容するようにした。 ◎ Allow interpolation between some <transform-list>s with different length.
- [ `置換され$ない行内~box, `table-column^v ~box, `table-column-group^v ~box ]は`変形-可能$でないものとした。 ◎ No transform on non-replaced inline boxes, table-column boxes, and table-column-group boxes.
- [ `pattern$e / `linearGradient$e / `radialGradient$e / `clipPath$e ]要素~上の~target座標~空間を定義した。 ◎ Define target coordinate space for transformations on pattern, linearGradient, radialGradient and clipPath elements.
- 変形-関数~primitiveから 3 個の引数をとる `rotate$f を除去した。 ◎ Remove 3-value <rotate()> from transform function primitives.
- `変形~行列$と`現在の変形~行列$の算出について,より特定的に与えた。 ◎ Be more specific about computation of transformation matrix and current transformation matrix.
- `塗t~server要素$ / `clipPath$e 要素 ]用の基準~boxを定義した。 ◎ Define reference box for paint servers and clipPath element.
- `transform$a 呈示~属性が遷移の[ `始~値^V / `終~値^V ]として 3 個の引数をとる `rotate$f を伴う場合の挙動を指定した。 ◎ Specify behavior of transform presentation attribute with 3-value-rotate as start or end value of a transition.
- `transform-box$p に `stroke-box^v, `content-box^v を追加した。 ~boxを対応付ける挙動が,すべての仕様にわたり揃うようにした。 ◎ Add stroke-box and content-box to transform-box. Align box mapping behavior across all specifications.
- 編集上の変更。 ◎ Editorial changes.
謝辞
注意深い考査, ~comment, 訂正を寄せられた次の方々に。
The editors would like to thank Robert O’Callahan, Cameron McCormack, Tab Atkins, Gérard Talbot, L. David Baron, Rik Cabanier, Brian Birtles, Benoit Jacob, Ken Shoemake, Alan Gresley, Maciej Stochowiak, Sylvain Galineau, Rafal Pietrak, Shane Stephens, Matt Rakow, XiangHongAi, Fabio M. Costa, Nivesh Rajbhandari, Rebecca Hauck, Gregg Tavares, Graham Clift, Erik Dahlström, Alexander Zolotov, Amelia Bellamy-Royds and Boris Zbarsky for their careful reviews, comments, and corrections.