You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
</a><li><ahref=#svg-syntax><spanclass=secno>13.2</span>Syntax of the SVG <spanclass=propertydata-link-type=propdesctitle=transform>transform</span> attribute</a><ulclass=toc><li><ahref=#svg-transform-list><spanclass=secno>13.2.1</span>Transform List</a><li><ahref=#svg-functional-notation><spanclass=secno>13.2.2</span>Functional Notation</a><li><ahref=#svg-data-types><spanclass=secno>13.2.3</span>SVG Data Types</a><ulclass=toc><li><ahref=#svg-transform-value><spanclass=secno>13.2.3.1</span>
104
104
The <spanclass=productiondata-link-type=typetitle="<translation-value>"><translation-value></span> and <spanclass=productiondata-link-type=typetitle="<length>"><length></span> type
The SVG <spanclass=attr-namedata-link-type=maybetitle=gradienttransform>gradientTransform</span> and <spanclass=attr-name>‘patternTransform‘</span> attributes
106
+
The SVG <spanclass=attr-namedata-link-type=maybetitle=gradienttransform>gradientTransform</span> and <spanclass=attr-namedata-link-type=maybetitle=patterntransform>patternTransform</span> attributes
</a><li><ahref=#svg-three-dimensional-functions><spanclass=secno>13.5</span>SVG and 3D transform functions</a><li><ahref=#svg-user-coordinate-space><spanclass=secno>13.6</span>User coordinate space</a><li><ahref=#transform-attribute-dom><spanclass=secno>13.7</span>
Interpolation of primitives and derived transform functions
119
-
</a><li><ahref=#matrix-interpolation><spanclass=secno>20</span>Interpolation of Matrices</a><ulclass=toc><li><ahref=#decomposing-a-4x4-matrix><spanclass=secno>20.1</span>Decomposing a Matrix</a><li><ahref=#matrix-values-interpolation><spanclass=secno>20.2</span>
120
-
Interpolation of decomposed matrix values
121
-
</a><li><ahref=#matrix-recomposing><spanclass=secno>20.3</span>Recomposing the Matrix</a></ul><li><ahref=#mathematical-description><spanclass=secno>21</span>
119
+
</a><li><ahref=#matrix-interpolation><spanclass=secno>20</span>Interpolation of Matrices</a><ulclass=toc><li><ahref=#interpolation-of-2d-matrices><spanclass=secno>20.1</span>Interpolation of 2D matrices</a><li><ahref=#interpolation-of-3d-matrices><spanclass=secno>20.2</span>Interpolation of 3D matrices</a><ulclass=toc><li><ahref=#decomposing-a-3d-matrix><spanclass=secno>20.2.1</span>Decomposing a 3D Matrix</a><li><ahref=#interpolation-of-decomposed-3d-matrix-values><spanclass=secno>20.2.2</span>
120
+
Interpolation of decomposed 3D matrix values
121
+
</a><li><ahref=#recomposing-to-a-3D-matrix><spanclass=secno>20.2.3</span>Recomposing to a 3D matrix</a></ul></ul><li><ahref=#mathematical-description><spanclass=secno>21</span>
A matrix computed for elements in a <adata-link-type=dfnhref=#3d-rendering-contexttitle="3d rendering context">3D rendering context</a>, as described <ahref=#accumulated-3d-transformation-matrix-computation>below</a>.
A 3x2 transformation matrix with 6 items or a 4x4 matrix with 16 items, where the items m<sub>31</sub>, m<sub>32</sub>, m<sub>13</sub>, m<sub>23</sub>, m<sub>43</sub>, m<sub>14</sub>, m<sub>24</sub>, m<sub>34</sub> are equal to <spanclass=cssdata-link-type=maybetitle=0>0</span> and m<sub>33</sub>, m<sub>44</sub> are equal to <spanclass=cssdata-link-type=maybetitle=1>1</span>.
A <ahref=#transform-functions>transform function</a> that is equivalent to a identity 4x4 matrix (see <ahref=#mathematical-description>Mathematical Description of Transform Functions</a>). Examples for identity transform functions are <spanclass=cssdata-link-type=maybetitle=translate(0)>translate(0)</span>, <spanclass=cssdata-link-type=maybetitle="translate3d(0, 0, 0)">translate3d(0, 0, 0)</span>, <spanclass=cssdata-link-type=maybetitle=translatex(0)>translateX(0)</span>, <spanclass=cssdata-link-type=maybetitle=translatey(0)>translateY(0)</span>, <spanclass=cssdata-link-type=maybetitle=translatez(0)>translateZ(0)</span>, <spanclass=cssdata-link-type=maybetitle=scale(1)>scale(1)</span>, <spanclass=cssdata-link-type=maybetitle=scalex(1)>scaleX(1)</span>, <spanclass=cssdata-link-type=maybetitle=scaley(1)>scaleY(1)</span>, <spanclass=cssdata-link-type=maybetitle=scalez(1)>scaleZ(1)</span>, <spanclass=cssdata-link-type=maybetitle=rotate(0)>rotate(0)</span>, <spanclass=cssdata-link-type=maybetitle="rotate3d(1, 1, 1, 0)">rotate3d(1, 1, 1, 0)</span>, <spanclass=cssdata-link-type=maybetitle=rotatex(0)>rotateX(0)</span>, <spanclass=cssdata-link-type=maybetitle=rotatey(0)>rotateY(0)</span>, <spanclass=cssdata-link-type=maybetitle=rotatez(0)>rotateZ(0)</span>, <spanclass=cssdata-link-type=maybetitle="skew(0, 0)">skew(0, 0)</span>, <spanclass=cssdata-link-type=maybetitle=skewx(0)>skewX(0)</span>, <spanclass=cssdata-link-type=maybetitle=skewy(0)>skewY(0)</span>, <spanclass=cssdata-link-type=maybetitle="matrix(1, 0, 0, 1, 0, 0)">matrix(1, 0, 0, 1, 0, 0)</span> and <spanclass=cssdata-link-type=maybetitle="matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)">matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</span>. A special case is perspective: <spanclass=cssdata-link-type=maybetitle=perspective(infinity)>perspective(infinity)</span>. The value of m<sub>34</sub> becomes infinitesimal small and the transform function is therefore assumed to be equal to the identity matrix.
<p>SVG supports scientific notations for numbers. Therefore a <em>number</em> gets parsed like described in SVG <ahref=http://www.w3.org/TR/SVG/types.html#DataTypeNumber>Basic data types</a> for SVG attributes.
The SVG <aclass=attr-namedata-link-type=maybehref=http://www.w3.org/TR/2011/REC-SVG11-20110816/http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradientElementGradientTransformAttributetitle=gradienttransform>gradientTransform</a> and <aclass=attr-namehref=http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElementPatternTransformAttribute>‘patternTransform‘</a> attributes
1112
+
The SVG <aclass=attr-namedata-link-type=maybehref=http://www.w3.org/TR/2011/REC-SVG11-20110816/http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradientElementGradientTransformAttributetitle=gradienttransform>gradientTransform</a> and <aclass=attr-namedata-link-type=maybehref=http://www.w3.org/TR/2011/REC-SVG11-20110816/http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElementPatternTransformAttributetitle=patterntransform>patternTransform</a> attributes
<p>SVG specifies the attributes <aclass=attr-namedata-link-type=maybehref=http://www.w3.org/TR/2011/REC-SVG11-20110816/http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradientElementGradientTransformAttributetitle=gradienttransform>gradientTransform</a> and <aclass=attr-namehref=http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElementPatternTransformAttribute>‘patternTransform‘</a>. This specification makes both attributes presentation attributes. Both attributes use the same <ahref=#svg-syntax>syntax</a> as the SVG <aclass=propertydata-link-type=propdeschref=#propdef-transformtitle=transform>transform</a> attribute. This specification does not introduce corresponding CSS style properties. Both, the <aclass=attr-namedata-link-type=maybehref=http://www.w3.org/TR/2011/REC-SVG11-20110816/http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradientElementGradientTransformAttributetitle=gradienttransform>gradientTransform</a> and the <aclass=attr-namehref=http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElementPatternTransformAttribute>‘patternTransform‘</a> attribute, are presentation attributes for the <aclass=propertydata-link-type=propdeschref=#propdef-transformtitle=transform>transform</a> property.
<h2class="heading settled heading" data-level=20id=matrix-interpolation><spanclass=secno>20 </span><spanclass=content>Interpolation of Matrices</span><aclass=self-linkhref=#matrix-interpolation></a></h2>
1796
1804
1797
-
<p>When interpolating between two matrices, each is decomposed into the corresponding translation, rotation, scale, skew and perspective values. Not all matrices can be accurately described by these values. Those that can’t are decomposed into the most accurate representation possible, using the pseudocode in <ahref=#decomposing-a-4x4-matrix>Decomposing the Matrix</a>. The resulting values get <ahref=#matrix-values-interpolation>interpolated numerically</a> and <ahref=#matrix-recomposing>recomposed back to a matrix</a> in a final step.
1805
+
<p>When interpolating between two matrices, each matrix is decomposed into the corresponding translation, rotation, scale, skew and (for a <adata-link-type=dfnhref=#3d-matrixtitle="3d matrix">3D matrix</a>) perspective values. Each corresponding component of the decomposed matrices gets interpolated numerically and recomposed back to a matrix in a final step.
<p>In the following we differ between the <ahref=#interpolation-of-2d-matrices>interpolation of two 2D matrices</a> and the <ahref=#interpolation-of-3d-matrices>interpolation of two matrices</a> where at least one matrix is not a <adata-link-type=dfnhref=#2d-matrixtitle="2d matrix">2D matrix</a>.
1833
+
1824
1834
<p>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.
1825
1835
1826
-
<pclass=issueid=issue-bf7b6c81><aclass=self-linkhref=#issue-bf7b6c81></a>The following algorithms does not create nice results for pure 2D interpolations. See <ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17017">Bug 17017</a>.</p>
1836
+
<h3class="heading settled heading" data-level=20.1id=interpolation-of-2d-matrices><spanclass=secno>20.1 </span><spanclass=content>Interpolation of 2D matrices</span><aclass=self-linkhref=#interpolation-of-2d-matrices></a></h3>
1837
+
1838
+
<p>The pseudo code below is based upon the "unmatrix" method in "Graphics Gems II, edited by Jim Arvo".
1839
+
1840
+
<pclass=issueid=issue-9abd49cc><aclass=self-linkhref=#issue-9abd49cc></a>Use different algorithm for interpolation of 2D matrices. See <ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17017">Bug 17017</a>.</p>
1841
+
1842
+
<h3class="heading settled heading" data-level=20.2id=interpolation-of-3d-matrices><spanclass=secno>20.2 </span><spanclass=content>Interpolation of 3D matrices</span><aclass=self-linkhref=#interpolation-of-3d-matrices></a></h3>
1827
1843
1828
-
<h3class="heading settled heading" data-level=20.1id=decomposing-a-4x4-matrix><spanclass=secno>20.1 </span><spanclass=content>Decomposing a Matrix</span><aclass=self-linkhref=#decomposing-a-4x4-matrix></a></h3>
1844
+
<h4class="heading settled heading" data-level=20.2.1id=decomposing-a-3d-matrix><spanclass=secno>20.2.1 </span><spanclass=content>Decomposing a 3D Matrix</span><aclass=self-linkhref=#decomposing-a-3d-matrix></a></h4>
1829
1845
1830
1846
<p>The pseudo code below is based upon the "unmatrix" method in "Graphics Gems II, edited by Jim Arvo", but modified to use Quaternions instead of Euler angles to avoid the problem of Gimbal Locks.
<p>Each component of the decomposed values translation, scale, skew and perspective of the source matrix get linearly interpolated with each corresponding component of the destination matrix.
<h3class="heading settled heading" data-level=20.3id=matrix-recomposing><spanclass=secno>20.3 </span><spanclass=content>Recomposing the Matrix</span><aclass=self-linkhref=#matrix-recomposing></a></h3>
2020
+
<h4class="heading settled heading" data-level=20.2.3id=recomposing-to-a-3D-matrix><spanclass=secno>20.2.3 </span><spanclass=content>Recomposing to a 3D matrix</span><aclass=self-linkhref=#recomposing-to-a-3D-matrix></a></h4>
2005
2021
2006
-
<p>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:
2022
+
<p>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:
<pclass=issue>Backface-visibility cannot be tested by only looking at m33. See <ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=23014">Bug 23014</a>.<ahref=#issue-1b6023b0> ↵ </a></p>
2383
2401
2384
-
<pclass=issue>The following algorithms does not create nice results for pure 2D interpolations. See <ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17017">Bug 17017</a>.<ahref=#issue-bf7b6c81> ↵ </a></p>
2402
+
<pclass=issue>Use different algorithm for interpolation of 2D matrices. See <ahref="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17017">Bug 17017</a>.<ahref=#issue-9abd49cc> ↵ </a></p>
0 commit comments