Skip to content

Commit 39758cc

Browse files
dirkschulzedirkschulze
committed
Define neutral element for addition on transforms.
1 parent e7a052b commit 39758cc

3 files changed

Lines changed: 118 additions & 23 deletions

File tree

‎css3-transforms/ChangeLog‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
2012-05-26 dschulze@adobe.com
2+
Define neutral element for addition on transforms.
3+
14
2012-05-25 dschulze@adobe.com
25
Clarify additive behavior of transforms on SVG animation.
36
Separate SVG Animation chapter from SVG 'transform' chapter.

‎css3-transforms/Overview.html‎

Lines changed: 65 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,14 @@
3939

4040
<h1>CSS Transforms</h1>
4141

42-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 May 2012</h2>
42+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 May 2012</h2>
4343

4444
<dl>
4545
<dt>This version:
4646

4747
<dd> <a
48-
href="http://www.w3.org/TR/2012/ED-css3-transforms-20120525/">http://dev.w3.org/csswg/css3-transforms/</a>
49-
<!--http://www.w3.org/TR/2012/WD-css3-transforms-20120525/-->
48+
href="http://www.w3.org/TR/2012/ED-css3-transforms-20120526/">http://dev.w3.org/csswg/css3-transforms/</a>
49+
<!--http://www.w3.org/TR/2012/WD-css3-transforms-20120526/-->
5050

5151
<dt>Latest version:
5252

@@ -281,10 +281,13 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
281281
<li><a href="#svg-animate-element"><span class=secno>14.1. </span>
282282
Elements, attributes and properties that can be animated </a>
283283

284-
<li><a href="#svg-attribute-name"><span class=secno>14.2. </span> The
284+
<li><a href="#neutral-element"><span class=secno>14.2. </span> Neutral
285+
element for addition </a>
286+
287+
<li><a href="#svg-attribute-name"><span class=secno>14.3. </span> The
285288
SVG ‘<code class=property>attributeName</code>’ attribute </a>
286289

287-
<li><a href="#svg-animateTransform-extension"><span class=secno>14.3.
290+
<li><a href="#svg-animateTransform-extension"><span class=secno>14.4.
288291
</span> The SVG ‘<code class=property>animateTransform</code>’
289292
element </a>
290293
</ul>
@@ -521,9 +524,9 @@ <h2 id=definitions><span class=secno>4. </span>Definitions</h2>
521524
‘<code class=css>matrix(1, 0, 0, 1, 0, 0)</code>’ and ‘<code
522525
class=css>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0,
523526
1)</code>’. A special case is perspective: ‘<code
524-
class=css>perspective(infinity)</code>’. The value of
525-
m<small>34</small> becomes infinitesimal small and the transform
526-
function is therefore assumed to be equal to the identity matrix.</p>
527+
class=css>perspective(infinity)</code>’. The value of m<sub>34</sub>
528+
becomes infinitesimal small and the transform function is therefore
529+
assumed to be equal to the identity matrix.</p>
527530

528531
<dt id=Term3DRenderingContext><dfn id=d-rendering-context>3D rendering
529532
context</dfn>
@@ -556,11 +559,12 @@ <h2 id=two-dimensional-subset><span class=secno>5. </span> Two Dimensional
556559
method in "Graphics Gems II, edited by Jim Arvo", simplified for the 2D
557560
case. Section <a href="#mathematical-description">Mathematical Description
558561
of Transform Functions</a> is still effective but can be reduced by using
559-
a 3x3 transformation matrix where <em>a</em> equals <em>m11</em>,
560-
<em>b</em> equals <em>m12</em>, <em>c</em> equals <em>m21</em>, <em>d</em>
561-
equals <em>m22</em>, <em>e</em> equals <em>m41</em> and <em>f</em> equals
562-
<em>m42</em> (see <a href="#MatrixDefined">A 2D 3x2 matrix with six
563-
parameter</a>).
562+
a 3x3 transformation matrix where <em>a</em> equals
563+
<em>m<sub>11</sub></em>, <em>b</em> equals <em>m<sub>12</sub></em>,
564+
<em>c</em> equals <em>m<sub>21</sub></em>, <em>d</em> equals
565+
<em>m<sub>22</sub></em>, <em>e</em> equals <em>m<sub>41</sub></em> and
566+
<em>f</em> equals <em>m<sub>42</sub></em> (see <a href="#MatrixDefined">A
567+
2D 3x2 matrix with six parameter</a>).
564568

565569
<div class=figure> <img alt="3x3 matrix" height=79 src=3x3matrix.png
566570
title="\begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix}"
@@ -2111,7 +2115,53 @@ <h3 id=svg-animate-element><span class=secno>14.1. </span> Elements,
21112115
<td> 
21122116
</table>
21132117

2114-
<h3 id=svg-attribute-name><span class=secno>14.2. </span> The SVG ‘<code
2118+
<h3 id=neutral-element><span class=secno>14.2. </span> Neutral element for
2119+
addition</h3>
2120+
2121+
<p> Some animations require a neutral element for addition. This neutral
2122+
element for transform functions must be equivalent to the null matrix.
2123+
Examples for transform functions and their values that fulfill this
2124+
requirement are ‘<code class=css>translate(0)</code>’, ‘<code
2125+
class=css>translate3d(0, 0, 0)</code>’, ‘<code
2126+
class=css>translateX(0)</code>’, ‘<code
2127+
class=css>translateY(0)</code>’, ‘<code
2128+
class=css>translateZ(0)</code>’, ‘<code class=css>scale(0)</code>’,
2129+
‘<code class=css>scaleX(0)</code>’, ‘<code
2130+
class=css>scaleY(0)</code>’, ‘<code class=css>scaleZ(0)</code>’,
2131+
‘<code class=css>rotate(0)</code>’, <!--''rotate3d(1, 1, 1, 0)'',-->
2132+
‘<code class=css>rotateX(0)</code>’, ‘<code
2133+
class=css>rotateY(0)</code>’, ‘<code class=css>rotateZ(0)</code>’,
2134+
‘<code class=css>skewX(0)</code>’, ‘<code
2135+
class=css>skewY(0)</code>’, ‘<code class=css>matrix(0, 0, 0, 0, 0,
2136+
0)</code>’ and ‘<code class=css>matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
2137+
0, 0, 0, 0, 0, 0)</code>’. A special case is perspective: ‘<code
2138+
class=css>perspective(infinity)</code>’. The value of m<sub>34</sub>
2139+
becomes infinitesimal small and the transform function is therefore
2140+
assumed to be equal to the null matrix.
2141+
2142+
<div class=example>
2143+
<p> A <var>by</var> animation with a by value v<sub>b</sub> is equivalent
2144+
to the same animation with a values list with 2 values, the neutral
2145+
element for addition for the domain of the target attribute (denoted 0)
2146+
and v<sub>b</sub>, and ‘<code class=css>additive="sum"</code>’.
2147+
[[SMILANIM]]</p>
2148+
2149+
<pre>
2150+
&lt;rect width="100" height="100"&gt;
2151+
&lt;animateTransform attributeName="transform" attributeType="XML"
2152+
type="scale" by="1" dur="5s" fill="freeze"/&gt;
2153+
&lt;/rect&gt;</pre>
2154+
2155+
<p> The neutral element for addition when performing a <var>by</var>
2156+
animation with ‘<code class=css>type="scale"</code>’ is the value 0.
2157+
Thus, performing the animation of the example above causes the rectangle
2158+
to be invisible at time 0s (since the animated transform list value is
2159+
‘<code class=css>scale(0)</code>’), and be scaled back to its
2160+
original size at time 5s (since the animated transform list value is
2161+
‘<code class=css>scale(1)</code>’).</p>
2162+
</div>
2163+
2164+
<h3 id=svg-attribute-name><span class=secno>14.3. </span> The SVG ‘<code
21152165
class=property>attributeName</code>’ attribute</h3>
21162166

21172167
<p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a>
@@ -2149,7 +2199,7 @@ <h3 id=svg-attribute-name><span class=secno>14.2. </span> The SVG ‘<code
21492199
translation of the second animation one after the other.</p>
21502200
</div>
21512201

2152-
<h3 id=svg-animateTransform-extension><span class=secno>14.3. </span> The
2202+
<h3 id=svg-animateTransform-extension><span class=secno>14.4. </span> The
21532203
SVG ‘<code class=property>animateTransform</code>’ element</h3>
21542204

21552205
<p> This specification introduces new transform functions that are not

‎css3-transforms/Transforms.src.html‎

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ <h2 id="definitions">Definitions</h2>
240240
''scaleZ(1)'', ''rotate(0)'', ''rotate3d(1, 1, 1, 0)'', ''rotateX(0)'',
241241
''rotateY(0)'', ''rotateZ(0)'', ''skewX(0)'', ''skewY(0)'', ''matrix(1, 0, 0, 1, 0,
242242
0)'' and ''matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)''. A special
243-
case is perspective: ''perspective(infinity)''. The value of m<small>34</small>
243+
case is perspective: ''perspective(infinity)''. The value of m<sub>34</sub>
244244
becomes infinitesimal small and the transform function is therefore assumed to be
245245
equal to the identity matrix.
246246
</p>
@@ -271,12 +271,12 @@ <h2 id="two-dimensional-subset">
271271
href="#transform-3d-rendering">3D Transform Rendering</a> does not apply.
272272
Matrix decomposing uses the technique taken from the "unmatrix" method in "Graphics
273273
Gems II, edited by Jim Arvo", simplified for the 2D case. Section
274-
<a href="#mathematical-description">Mathematical Description of Transform
275-
Functions</a> is still effective but can be reduced by using a 3x3
276-
transformation matrix where <em>a</em> equals <em>m11</em>, <em>b</em> equals
277-
<em>m12</em>, <em>c</em> equals <em>m21</em>, <em>d</em> equals <em>m22</em>,
278-
<em>e</em> equals <em>m41</em> and <em>f</em> equals <em>m42</em> (see <a
279-
href="#MatrixDefined">A 2D 3x2 matrix with six parameter</a>).
274+
<a href="#mathematical-description">Mathematical Description of Transform Functions</a>
275+
is still effective but can be reduced by using a 3x3 transformation matrix where
276+
<em>a</em> equals <em>m<sub>11</sub></em>, <em>b</em> equals <em>m<sub>12</sub></em>,
277+
<em>c</em> equals <em>m<sub>21</sub></em>, <em>d</em> equals <em>m<sub>22</sub></em>,
278+
<em>e</em> equals <em>m<sub>41</sub></em> and <em>f</em> equals <em>m<sub>42</sub></em>
279+
(see <a href="#MatrixDefined">A 2D 3x2 matrix with six parameter</a>).
280280
</p>
281281

282282
<div class="figure">
@@ -1875,7 +1875,8 @@ <h3 id="svg-animate-element">
18751875
<td>yes</td>
18761876
<td>no</td>
18771877
<td>yes</td>
1878-
<td>Additive means that a transformation is post-multiplied to the base set of transformations.</td>
1878+
<td>Additive means that a transformation is post-multiplied to the base set of
1879+
transformations.</td>
18791880
</tr>
18801881
<tr>
18811882
<td><var>&lt;translation-value&gt;</var></td>
@@ -1888,6 +1889,47 @@ <h3 id="svg-animate-element">
18881889
</tr>
18891890
</tbody>
18901891
</table>
1892+
1893+
<h3 id="neutral-element">
1894+
Neutral element for addition
1895+
</h3>
1896+
1897+
<p>
1898+
Some animations require a neutral element for addition. This neutral element for
1899+
transform functions must be equivalent to the null matrix. Examples for transform
1900+
functions and their values that fulfill this requirement are ''translate(0)'',
1901+
''translate3d(0, 0, 0)'', ''translateX(0)'', ''translateY(0)'', ''translateZ(0)'',
1902+
''scale(0)'', ''scaleX(0)'', ''scaleY(0)'', ''scaleZ(0)'', ''rotate(0)'',
1903+
<!--''rotate3d(1, 1, 1, 0)'',--> ''rotateX(0)'', ''rotateY(0)'', ''rotateZ(0)'',
1904+
''skewX(0)'', ''skewY(0)'', ''matrix(0, 0, 0, 0, 0, 0)'' and ''matrix3d(0, 0, 0, 0,
1905+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)''. A special case is perspective:
1906+
''perspective(infinity)''. The value of m<sub>34</sub> becomes infinitesimal small
1907+
and the transform function is therefore assumed to be equal to the null matrix.
1908+
</p>
1909+
1910+
<div class="example">
1911+
<p>
1912+
A <var>by</var> animation with a by value v<sub>b</sub> is equivalent to the same
1913+
animation with a values list with 2 values, the neutral element for addition for
1914+
the domain of the target attribute (denoted 0) and v<sub>b</sub>, and
1915+
''additive="sum"''. [[SMILANIM]]
1916+
</p>
1917+
1918+
<pre>
1919+
&lt;rect width="100" height="100"&gt;
1920+
&lt;animateTransform attributeName="transform" attributeType="XML"
1921+
type="scale" by="1" dur="5s" fill="freeze"/&gt;
1922+
&lt;/rect&gt;</pre>
1923+
1924+
<p>
1925+
The neutral element for addition when performing a <var>by</var> animation with
1926+
''type="scale"'' is the value 0. Thus, performing the animation of the example
1927+
above causes the rectangle to be invisible at time 0s (since the animated
1928+
transform list value is ''scale(0)''), and be scaled back to its original size at
1929+
time 5s (since the animated transform list value is ''scale(1)'').
1930+
</p>
1931+
1932+
</div>
18911933

18921934
<h3 id="svg-attribute-name">
18931935
The SVG 'attributeName' attribute

0 commit comments

Comments
 (0)