W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css3-transforms Overview.html,1.29,1.30 Transforms.src.html,1.32,1.33 ChangeLog,1.19,1.20

From: Dirk Schulze via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 24 Feb 2012 19:42:24 +0000
To: public-css-commits@w3.org
Message-Id: <E1S1128-0000kr-2Z@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv2887

Modified Files:
	Overview.html Transforms.src.html ChangeLog 
Log Message:
2012-02-13 dschulze@adobe.com
    Corrected mistake in the rotate3d matrix.
    Changed wording in introduction to match SVG and HTML.
    Use capital letters on main headlines for nouns.
    Fixed typos.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.29
retrieving revision 1.30
diff -u -d -r1.29 -r1.30
--- Overview.html	22 Feb 2012 18:45:34 -0000	1.29
+++ Overview.html	24 Feb 2012 19:42:21 -0000	1.30
@@ -36,15 +36,15 @@
 
    <h1>CSS Transforms</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 February
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 February
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd> <a
-     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120222/">http://dev.w3.org/csswg/css3-transforms/</a>
-     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120222-->
+     href="http://www.w3.org/TR/2012/ED-css3-transforms-20120224/">http://dev.w3.org/csswg/css3-transforms/</a>
+     <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120224-->
 
     <dt>Latest version:
 
@@ -191,65 +191,125 @@
 
    <li><a href="#transform-property"><span class=secno>6. </span> The <code
     class=property>'transform'</code> Property </a>
+
+   <li><a href="#svg-transform"><span class=secno>7. </span> The SVG
+    &lsquo;<code class=property>transform</code>&rsquo; Attribute </a>
     <ul class=toc>
-     <li><a href="#svg-transform"><span class=secno>6.1. </span>The SVG
-      transform attribute</a>
+     <li><a href="#transform-attribute-specificity"><span class=secno>7.1.
+      </span>SVG &lsquo;<code class=property>transform</code>&rsquo;
+      attribute specificity</a>
+
+     <li><a href="#svg-syntax"><span class=secno>7.2. </span>Syntax for SVG
+      &lsquo;<code class=property>transform</code>&rsquo; attribute</a>
       <ul class=toc>
-       <li><a href="#transform-attribute-specificity"><span
-        class=secno>6.1.1. </span>SVG transform attribute specificity</a>
+       <li><a href="#svg-transform-list"><span class=secno>7.2.1.
+        </span>Transform List</a>
 
-       <li><a href="#transform-attribute-dom"><span class=secno>6.1.2.
-        </span>SVG transform attribute DOM</a>
+       <li><a href="#svg-functional-notation"><span class=secno>7.2.2.
+        </span>Functional Notations</a>
+
+       <li><a href="#svg-data-types"><span class=secno>7.2.3. </span>SVG Data
+        Types</a>
+        <ul class=toc>
+         <li><a href="#svg-transform-value"><span class=secno>7.2.3.1.
+          </span>The &lsquo;<code
+          class=css>&lt;translation-value&gt;</code>&rsquo; and &lsquo;<code
+          class=css>&lt;length&gt;</code>&rsquo; type</a>
+
+         <li><a href="#svg-angle"><span class=secno>7.2.3.2. </span>The
+          &lsquo;<code class=css>&lt;angle&gt;</code>&rsquo; type</a>
+
+         <li><a href="#svg-number"><span class=secno>7.2.3.3. </span>The
+          &lsquo;<code class=css>&lt;number&gt;</code>&rsquo; type</a>
+        </ul>
+      </ul>
+
+     <li><a href="#svg-gradient-transform-pattern-transform"><span
+      class=secno>7.3. </span>The SVG &lsquo;<code
+      class=property>gradientTransform</code>&rsquo; and &lsquo;<code
+      class=property>patternTransform</code>&rsquo; attributes</a>
+
+     <li><a href="#svg-three-dimensional-functions"><span class=secno>7.4.
+      </span>SVG &lsquo;<code class=property>transform</code>&rsquo;
+      attribute and 3D transformation functions</a>
+
+     <li><a href="#svg-transformation-functions"><span class=secno>7.5.
+      </span>SVG transformation functions</a>
+
+     <li><a href="#svg-object-bounding-box"><span class=secno>7.6.
+      </span>Object bounding box units</a>
+
+     <li><a href="#transform-attribute-dom"><span class=secno>7.7. </span>SVG
+      &lsquo;<code class=property>transform</code>&rsquo; attribute DOM</a>
+
+     <li><a href="#svg-animation"><span class=secno>7.8. </span>SVG
+      Animation</a>
+      <ul class=toc>
+       <li><a href="#svg-animate-element"><span class=secno>7.8.1. </span>The
+        SVG &lsquo;<code class=property>animate</code>&rsquo; and
+        &lsquo;<code class=property>set</code>&rsquo; element</a>
+
+       <li><a href="#svg-attribute-name"><span class=secno>7.8.2. </span>The
+        SVG &lsquo;<code class=property>attributeName</code>&rsquo;
+        attribute</a>
+
+       <li><a href="#svg-attribute-type"><span class=secno>7.8.3. </span>The
+        SVG &lsquo;<code class=property>attributeType</code>&rsquo;
+        attribute</a>
+
+       <li><a href="#svg-animateTransform-extension"><span class=secno>7.8.4.
+        </span>The SVG &lsquo;<code
+        class=property>animateTransform</code>&rsquo; element</a>
       </ul>
     </ul>
 
-   <li><a href="#transform-origin-property"><span class=secno>7. </span> The
+   <li><a href="#transform-origin-property"><span class=secno>8. </span> The
     <code class=property>'transform-origin'</code> Property </a>
 
-   <li><a href="#transform-style-property"><span class=secno>8. </span> The
+   <li><a href="#transform-style-property"><span class=secno>9. </span> The
     <code class=property>'transform-style'</code> Property </a>
 
-   <li><a href="#perspective-property"><span class=secno>9. </span> The <code
-    class=property>'perspective'</code> Property </a>
+   <li><a href="#perspective-property"><span class=secno>10. </span> The
+    <code class=property>'perspective'</code> Property </a>
 
-   <li><a href="#perspective-origin-property"><span class=secno>10. </span>
+   <li><a href="#perspective-origin-property"><span class=secno>11. </span>
     The <code class=property>'perspective-origin'</code> Property </a>
 
-   <li><a href="#backface-visibility-property"><span class=secno>11. </span>
+   <li><a href="#backface-visibility-property"><span class=secno>12. </span>
     The <code class=property>'backface-visibility'</code> Property </a>
 
-   <li><a href="#transform-functions"><span class=secno>12. </span> The
+   <li><a href="#transform-functions"><span class=secno>13. </span> The
     Transformation Functions </a>
     <ul class=toc>
-     <li><a href="#two-d-transform-functions"><span class=secno>12.1.
+     <li><a href="#two-d-transform-functions"><span class=secno>13.1.
       </span>2D Transformation Functions</a>
 
-     <li><a href="#three-d-transform-functions"><span class=secno>12.2.
+     <li><a href="#three-d-transform-functions"><span class=secno>13.2.
       </span>3D Transformation Functions</a>
     </ul>
 
-   <li><a href="#transform-values"><span class=secno>13. </span> Transform
+   <li><a href="#transform-values"><span class=secno>14. </span> Transform
     Values and Lists </a>
 
-   <li><a href="#animation"><span class=secno>14. </span> Transitions and
+   <li><a href="#animation"><span class=secno>15. </span> Transitions and
     Animations between Transform Values </a>
 
-   <li><a href="#matrix-decomposition"><span class=secno>15. </span> Matrix
+   <li><a href="#matrix-decomposition"><span class=secno>16. </span> Matrix
     Decomposition for Animation </a>
     <ul class=toc>
-     <li><a href="#unmatrix"><span class=secno>15.1. </span>Unmatrix</a>
+     <li><a href="#unmatrix"><span class=secno>16.1. </span>Unmatrix</a>
 
-     <li><a href="#animating-the-components"><span class=secno>15.2.
+     <li><a href="#animating-the-components"><span class=secno>16.2.
       </span>Animating the components</a>
 
-     <li><a href="#recomposing-the-matrix"><span class=secno>15.3.
+     <li><a href="#recomposing-the-matrix"><span class=secno>16.3.
       </span>Recomposing the matrix</a>
     </ul>
 
-   <li><a href="#mathematical-description"><span class=secno>16. </span>
+   <li><a href="#mathematical-description"><span class=secno>17. </span>
     Mathematical Description of Transformation Functions </a>
 
-   <li><a href="#references"><span class=secno>17. </span>References</a>
+   <li><a href="#references"><span class=secno>18. </span>References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-references">Normative
       references</a>
@@ -752,7 +812,7 @@
   </div>
 
   <p> Elements in the same <a class=term href="#d-rendering-context">3D
-   rendering context</a> may intersect with eachother. User agents should
+   rendering context</a> may intersect with each other. User agents should
    subdivide the planes of intersecting elements as described by <a
    href="http://en.wikipedia.org/wiki/Newell's_algorithm">Newell's
    algorithm</a> to render intersection.
@@ -897,33 +957,323 @@
    positioned descendants.</p>
   <!-- ======================================================================================================= -->
 
-  <h3 id=svg-transform><span class=secno>6.1. </span>The SVG transform
-   attribute</h3>
+  <h2 id=svg-transform><span class=secno>7. </span> The SVG &lsquo;<a
+   href="#effects"><code class=property>transform</code></a>&rsquo; Attribute
+   </h2>
 
-  <p>The <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">SVG 1.1
-   specification</a> did not specify the &lsquo;<a href="#effects"><code
-   class=property>transform</code></a>&rsquo; attribute as a <a
+  <p> The <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">SVG 1.1
+   specification</a> did not specify the attributes &lsquo;<a
+   href="#effects"><code class=property>transform</code></a>&rsquo;,
+   &lsquo;<code class=property>gradientTransform</code>&rsquo; or
+   &lsquo;<code class=property>patternTransform</code>&rsquo; as <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes">presentation
-   attribute</a>. In order to improve the integration of SVG and HTML, this
-   specification makes the SVG &lsquo;<a href="#effects"><code
-   class=property>transform</code></a>&rsquo; attribute a &lsquo;<code
-   class=css>presentation attribute</code>&rsquo; and makes the &lsquo;<a
+   attributes</a>. In order to improve the integration of SVG and HTML, this
+   specification makes these SVG attributes to &lsquo;<code
+   class=css>presentation attributes</code>&rsquo; and makes the &lsquo;<a
    href="#effects"><code class=property>transform</code></a>&rsquo; property
-   one that applies to SVG elements.
+   one that applies to transformable elements in the SVG namespace.
 
-  <h4 id=transform-attribute-specificity><span class=secno>6.1.1. </span>SVG
-   transform attribute specificity</h4>
+  <p> This specification will also introduce the new presentation attributes
+   <a href="#transform-origin-property">&lsquo;<code
+   class=property>transform-origin</code>&rsquo;</a>, <a
+   href="#perspective-property">&lsquo;<code
+   class=property>perspective</code>&rsquo;</a>, <a
+   href="#perspective-origin-property">&lsquo;<code
+   class=property>perspective-origin</code>&rsquo;</a>, <a
+   href="#transform-style-property">&lsquo;<code
+   class=property>transform-style</code>&rsquo;</a> and <a
+   href="#backface-visibility-property">&lsquo;<code
+   class=property>backface-visibility</code>&rsquo;</a> in the SVG namespace.
+   All new introduced presentation attributes are animateable.
 
-  <p>Since the SVG attribute becomes a presentation attribute, its
-   participation to the CSS cascade is determined by the specificity of
-   presentation attributes, as <a
+  <h3 id=transform-attribute-specificity><span class=secno>7.1. </span>SVG
+   &lsquo;<a href="#effects"><code class=property>transform</code></a>&rsquo;
+   attribute specificity</h3>
+
+  <p>Since the previously named SVG attributes become presentation
+   attributes, their participation to the CSS cascade is determined by the
+   specificity of presentation attributes, as <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes">explained</a>
    in the SVG specification.
 
-  <h4 id=transform-attribute-dom><span class=secno>6.1.2. </span>SVG
-   transform attribute DOM</h4>
+  <div class=example>
+   <p> This example shows the combination of the &lsquo;<a
+    href="#effects"><code class=property>transform</code></a>&rsquo; style
+    property and the &lsquo;<a href="#effects"><code
+    class=property>transform</code></a>&rsquo; presentation attribute.</p>
 
-  <p>The SVG specification <a
+   <pre>&lt;svg&gt;
+    &lt;style&gt;
+    .container {
+        transform: translate(100px, 100px);
+    }
+    &lt;/style&gt;
+
+    &lt;g class="container" transform="translate  (200 200)"&gt;
+        &lt;rect width="100" height="100" fill="blue" /&gt;
+    &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+   <div class=figure> <img alt="Translated SVG container element." height=200
+    src="examples/svg-translate.png" width=200></div>
+
+   <p> Because of the participation to the CSS cascade, the &lsquo;<a
+    href="#effects"><code class=property>transform</code></a>&rsquo; style
+    property overrides the &lsquo;<a href="#effects"><code
+    class=property>transform</code></a>&rsquo; presentation attribute.
+    Therefore the container gets translated by 100px in horizontal and
+    vertical direction, instead of 200px.</p>
+  </div>
+
+  <h3 id=svg-syntax><span class=secno>7.2. </span>Syntax for SVG &lsquo;<a
+   href="#effects"><code class=property>transform</code></a>&rsquo; attribute</h3>
+
+  <p> To provide backward compatibility, the syntax of the &lsquo;<a
+   href="#effects"><code class=property>transform</code></a>&rsquo;
+   presentation attribute differs from the syntax of the &lsquo;<a
+   href="#effects"><code class=property>transform</code></a>&rsquo; style
+   property like shown in the example above. However, the syntax used for the
+   &lsquo;<a href="#effects"><code class=property>transform</code></a>&rsquo;
+   style property can be used for a &lsquo;<a href="#effects"><code
+   class=property>transform</code></a>&rsquo; presentation attribute value.
+   Authors are advised to follow the rules of <a
+   href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values
+   and Units Module</a>. Therefore an author should write
+   <code>transform="translate(200px, 200px)"</code> instead of
+   <code>transform="translate (200 200)"</code> because the second example
+   with the spaces before the &lsquo;<code class=css>(</code>&rsquo;, the
+   missing comma between the arguments and the values without the explicit
+   unit notation would be valid for the attribute only.
+
+  <h4 id=svg-transform-list><span class=secno>7.2.1. </span>Transform List</h4>
+
+  <p> The value for the &lsquo;<a href="#effects"><code
+   class=property>transform</code></a>&rsquo; attribute consists of a
+   transform list with zero or more transformation functions in the <a
+   href="#svg-functional-notation">functional notation</a>. If the transform
+   list consists of more than one transformation function, these functions
+   are separated by either a comma (‘,’) with optional whitespace before
+   and after the comma or one or more whitespaces. The transform list can
+   have optional whitespaces before and after the list.
+
+  <h4 id=svg-functional-notation><span class=secno>7.2.2. </span>Functional
+   Notations</h4>
+
+  <p> The syntax starts with the name of the function followed by optional
+   whitespaces followed by a left parenthesis followed by optional whitespace
+   followed by the argument(s) to the notation followed by optional
+   whitespace followed by a right parenthesis. If a function takes more than
+   one argument, the arguments are either separated by a comma (‘,’) with
+   optional whitespace before and after the comma or one or more whitespaces.
+   
+
+  <h4 id=svg-data-types><span class=secno>7.2.3. </span>SVG Data Types</h4>
+
+  <p> Arguments of transformation functions consists of data types in the
+   sense of <a
+   href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values
+   and Units Module</a>. The definitions of data types in CSS Values and
+   Units Module gets enhanced as follows:
+
+  <h5 id=svg-transform-value><span class=secno>7.2.3.1. </span>The
+   &lsquo;<code class=css>&lt;translation-value&gt;</code>&rsquo; and
+   &lsquo;<code class=css>&lt;length&gt;</code>&rsquo; type</h5>
+
+  <p> A translation-value or length can be a &lsquo;<code
+   class=css>&lt;number&gt;</code>&rsquo; without an unit identifier. In this
+   case the <a href="#svg-number"><i>number</i></a> gets interpreted as "user
+   unit". A user unit in the the <a
+   href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem">initial
+   coordinate system</a> is equivalenced to the parent environment's notion
+   of a px unit.
+
+  <h5 id=svg-angle><span class=secno>7.2.3.2. </span>The &lsquo;<code
+   class=css>&lt;angle&gt;</code>&rsquo; type</h5>
+
+  <p> An angle can be a &lsquo;<code class=css>&lt;number&gt;</code>&rsquo;
+   without an unit identifier. In this case the <a
+   href="#svg-number"><i>number</i></a> gets interpreted as a value in
+   degrees.
+
+  <h5 id=svg-number><span class=secno>7.2.3.3. </span>The &lsquo;<code
+   class=css>&lt;number&gt;</code>&rsquo; type</h5>
+
+  <p> SVG supports scientific notations for numbers. Therefore a
+   <i>number</i> gets parsed like described in SVG <a
+   href="http://www.w3.org/TR/SVG/types.html#DataTypeNumber">Basic data
+   types</a> for SVG attributes.
+
+  <h3 id=svg-gradient-transform-pattern-transform><span class=secno>7.3.
+   </span>The SVG &lsquo;<code class=property>gradientTransform</code>&rsquo;
+   and &lsquo;<code class=property>patternTransform</code>&rsquo; attributes</h3>
+
+  <p> SVG specifies the attributes &lsquo;<code
+   class=property>gradientTransform</code>&rsquo; and &lsquo;<code
+   class=property>patternTransform</code>&rsquo;. This specification makes
+   both attributes to presentation attributes. Both attributes use the same
+   <a href="#svg-syntax">syntax</a> as the SVG &lsquo;<a
+   href="#effects"><code class=property>transform</code></a>&rsquo;
+   attribute. This specification won't introduce corresponding CSS style
+   properties. Instead the style can be set by the <a
+   href="#transform-property">&lsquo;<code
+   class=property>transform</code>&rsquo;</a> style property.
+
+  <h3 id=svg-three-dimensional-functions><span class=secno>7.4. </span>SVG
+   &lsquo;<a href="#effects"><code class=property>transform</code></a>&rsquo;
+   attribute and 3D transformation functions</h3>
+
+  <p> This specification explicitly allows to apply three-dimensional
+   transformation functions to the SVG container elements: &lsquo;<code
+   class=property>a</code>&rsquo;, &lsquo;<code
+   class=property>g</code>&rsquo;, &lsquo;<code
+   class=property>svg</code>&rsquo;, the SVG graphics elements: ‘circle’,
+   ‘ellipse’, ‘image’, ‘line’, ‘path’, ‘polygon’,
+   ‘polyline’, ‘rect’, ‘text’, the SVG referencing element
+   &lsquo;<code class=property>use</code>&rsquo; and the SVG &lsquo;<code
+   class=property>foreignObject</code>&rsquo; element.
+
+  <div class=issue>
+   <p> Either allow 3D transformation functions on children of patterns, mask
+    and others and explain how to flatten the results, or use the following
+    wording:</p>
+
+   <p> Three-dimensional transformation functions are not allowed for the
+    elements: &lsquo;<code class=property>clipPath</code>&rsquo;,
+    &lsquo;<code class=property>mask</code>&rsquo;, &lsquo;<code
+    class=property>linearGradient</code>&rsquo;, &lsquo;<code
+    class=property>radialGradient</code>&rsquo;, &lsquo;<code
+    class=property>pattern</code>&rsquo; or any child elements (including
+    elements referenced by the &lsquo;<code class=property>use</code>&rsquo;
+    element) in the rendering context of these elements. If a transform list
+    of these elements includes a three-dimensional transformation function,
+    the complete transform list must be ignored for this element. The
+    &lsquo;<a href="#perspective"><code
+    class=property>perspective</code></a>&rsquo;, &lsquo;<a
+    href="#perspective-origin"><code
+    class=property>perspective-origin</code></a>&rsquo;, &lsquo;<a
+    href="#transform-style"><code
+    class=property>transform-style</code></a>&rsquo; and &lsquo;<a
+    href="#backface-visibility"><code
+    class=property>backface-visibility</code></a>&rsquo; presentation
+    attributes get ignored as well. Future versions of this specification
+    might define exceptions for this rule.</p>
+
+   <div class=example>
+    <p> This example has a &lsquo;<code class=property>pattern</code>&rsquo;
+     element with the child element &lsquo;<code
+     class=property>rect</code>&rsquo;. This child element has a
+     three-dimensional transformation function. The &lsquo;<code
+     class=property>use</code>&rsquo; element after the pattern definition
+     references this &lsquo;<code class=property>rect</code>&rsquo;.</p>
+
+    <pre>&lt;svg&gt;
+    &lt;defs&gt;
+    &lt;pattern id="pattern-1"&gt;
+        &lt;rect id="rect1" width="100" height="100" fill="blue" transform="rotateX(45deg)" /&gt;
+    &lt;/pattern&gt;
+    &lt;/defs&gt;
+
+    &lt;use x="100" y="0" xlink:href="rect1" /&gt;
+    
+    &lt;circle cx="50" cy="50" r="50" fill="url(#pattern-1)" /&gt;
+&lt;/svg&gt;</pre>
+
+    <p> For the pattern the transform list of this rect gets ignored since it
+     is in the rendering context of the pattern. For the &lsquo;<code
+     class=property>use</code>&rsquo; element, the three-dimensional
+     transformation function gets applied, since it is not in ther rendering
+     context of the pattern anymore.</p>
+   </div>
+  </div>
+
+  <h3 id=svg-transformation-functions><span class=secno>7.5. </span>SVG
+   transformation functions</h3>
+
+  <p> For backward compatibility to existing SVG content, this specification
+   must support all transformation functions defined by <a
+   href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">The
+   &lsquo;<code class=property>transform</code>&rsquo; attribute</a> in SVG
+   1.1. Therefore the two-dimensional transformation function <a
+   href="#two-d-transform-functions">&lsquo;<code
+   class=property>rotate</code>&rsquo;</a> gets extended as follows:
+
+  <dl>
+   <dt> <code class=css>rotate(&lt;angle&gt;[, &lt;translation-value&gt;,
+    &lt;translation-value&gt;])</code>
+
+   <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle
+    specified in the parameter about the origin of the element, as defined by
+    the <a href="#transform-origin"><em>transform-origin</em></a> property.
+    If the optional translation values are specified, the transform origin is
+    translated by that amount (using the current transformation matrix) for
+    the duration of the rotate operation. For example rotate(90deg, 100px,
+    100px) would elements cause to appear rotated one-quarter of a turn in
+    the clockwise direction after a translation of 100px in the vertical and
+    horizontal direction.
+  </dl>
+
+  <p> User agents are just required to support the two optional arguments for
+   translation on elements in the SVG namespace.
+
+  <h3 id=svg-object-bounding-box><span class=secno>7.6. </span>Object
+   bounding box units</h3>
+
+  <p> Percentage or fractional values in SVG are either relative to the
+   elements viewport units or to the elements <a
+   href="http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits">object
+   bounding box units</a> like specified in SVG 1.1. To align with HTML, all
+   percentage values for all properties defined in this specification are
+   relative to the object bounding box units.
+
+  <p> If an SVG element does not provide an object bounding box (like for the
+   &lsquo;<code class=property>pattern</code>&rsquo;, &lsquo;<code
+   class=property>mask</code>&rsquo; or &lsquo;<code
+   class=property>clipPath</code>&rsquo; elements), the bounding box is the
+   same like if the position x, y and the dimensions width and height are
+   zero. Percentage values or keywords won't affect the rendering and occur
+   as if zero was specified.
+
+  <div class=example>
+   <p> The &lsquo;<a href="#transform-origin"><code
+    class=property>transform-origin</code></a>&rsquo; property on the pattern
+    in the following example specifies a 50% translation of the origin in the
+    horizontal and vertical dimension. The &lsquo;<a href="#effects"><code
+    class=property>transform</code></a>&rsquo; property specifies a
+    translation as well, but in absolute lengths.</p>
+
+   <pre>&lt;svg&gt;
+    &lt;style&gt;
+    pattern {
+        transform: translate(50px, 50px) rotate(45deg);
+        transform-origin: 50% 50%;
+    }
+    &lt;/style&gt;
+    
+    &lt;defs&gt;
+    &lt;pattern id="pattern-1"&gt;
+        &lt;rect id="rect1" width="100" height="100" fill="blue" /&gt;
+    &lt;/pattern&gt;
+    &lt;/defs&gt;
+
+    &lt;rect width="100" height="100" fill="url(#pattern-1)" /&gt;
+&lt;/svg&gt;</pre>
+
+   <p> A SVG &lsquo;<code class=property>pattern</code>&rsquo; element
+    doesn't have an object bounding box. Therefore the relative values of the
+    &lsquo;<a href="#transform-origin"><code
+    class=property>transform-origin</code></a>&rsquo; property don't affect
+    the rendering and are treated as if zero was specified. The translation
+    on the &lsquo;<a href="#effects"><code
+    class=property>transform</code></a>&rsquo; property is in absolute
+    coordinates and translate the coordinate system by 50 pixel in each
+    direction.</p>
+  </div>
+
+  <h3 id=transform-attribute-dom><span class=secno>7.7. </span>SVG &lsquo;<a
+   href="#effects"><code class=property>transform</code></a>&rsquo; attribute
+   DOM</h3>
+
+  <p> The SVG specification <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">defines</a>
    a DOM interface to access the animated and base value of the SVG transform
    attribute. To ensure backwards compatibility, this API should still be
@@ -934,25 +1284,116 @@
    value which account for CSS animation, if any is underway.
 
   <div class=issue>
-   <ul>
-    <li>Should we also make gradientTransform and patternTransform
-     presentation attributes? Proposal: they are the &lsquo;<code
-     class=css>presentation attributes</code>&rsquo; for &lt;gradient&gt; and
-     &gt;pattern&lt; respectively, for the &lsquo;<a href="#effects"><code
-     class=property>transform</code></a>&rsquo; property (i.e., there is no
-     &lsquo;<code class=property>gradientTransform</code>&rsquo; property.
-     Instead, the &lsquo;<code class=property>gradientTransform</code>&rsquo;
-     is a presentation attribute that provides a value for the &lsquo;<a
-     href="#effects"><code class=property>transform</code></a>&rsquo;
-     property that applies to the &lt;gradient&gt; element.)
+   <p> The SVG WG as well as the FX task force solved issues with
+    &lsquo;<code class=property>baseVal</code>&rsquo; and &lsquo;<code
+    class=property>animVal</code>&rsquo;. This section needs to address the
+    resolutions.</p>
+  </div>
 
-    <li>Is this proposal working for SMIL animation of the transform
-     property?
-   </ul>
+  <h3 id=svg-animation><span class=secno>7.8. </span>SVG Animation</h3>
+
+  <h4 id=svg-animate-element><span class=secno>7.8.1. </span>The SVG
+   &lsquo;<code class=property>animate</code>&rsquo; and &lsquo;<code
+   class=property>set</code>&rsquo; element</h4>
+
+  <p> The SVG 1.1 specification did not define animations of the &lsquo;<a
+   href="#effects"><code class=property>transform</code></a>&rsquo; attribute
+   for the SVG &lsquo;<code class=property>animate</code>&rsquo; element or
+   the SVG &lsquo;<code class=property>set</code>&rsquo; element. This
+   specification explicitly allows the animation of the presentation
+   attributes &lsquo;<a href="#effects"><code
+   class=property>transform</code></a>&rsquo;, &lsquo;<code
+   class=property>gradientTransform</code>&rsquo; and &lsquo;<code
+   class=property>patternTransform</code>&rsquo; for the &lsquo;<code
+   class=property>animate</code>&rsquo; and &lsquo;<code
+   class=property>set</code>&rsquo; elements. SVG animation must run the same
+   animation steps as described in section <a href="#animation">Transitions
+   and Animations between Transform Values</a>.
+
+  <h4 id=svg-attribute-name><span class=secno>7.8.2. </span>The SVG
+   &lsquo;<code class=property>attributeName</code>&rsquo; attribute</h4>
+
+  <p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a>
+   defines the <a
+   href="http://www.w3.org/TR/SVG/animate.html#TargetAttributes">&lsquo;<code
+   class=property>attributeName</code>&rsquo;</a> attribute to specify the
+   name of the target attribute. For the presentation attributes &lsquo;<code
+   class=property>gradientTransform</code>&rsquo; and &lsquo;<code
+   class=property>patternTransform</code>&rsquo; it will also be possible to
+   use the value &lsquo;<a href="#effects"><code
+   class=property>transform</code></a>&rsquo;. The same presentation
+   attribute style will get animated.
+
+  <div class=example>
+   <p> In this example the gradient transformation of the linear gradient
+    gets animated.</p>
+
+   <pre>&lt;linearGradient gradientTransform="scale(2)"&gt;
+    &lt;animate attributeName="gradientTransform" from="scale(2)" to="scale(4)"
+          dur="3s" additive="sum"/&gt;
+    &lt;animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)"
+          dur="3s" additive="sum"/&gt;
+&lt;/linearGradient&gt;</pre>
+
+   <p>The &lsquo;<code class=property>linearGradient</code>&rsquo; element
+    specifies the &lsquo;<code class=property>gradientTransform</code>&rsquo;
+    presentation attribute. The two &lsquo;<code
+    class=property>animate</code>&rsquo; elements address the target
+    attribute &lsquo;<code class=property>gradientTransform</code>&rsquo; and
+    &lsquo;<a href="#effects"><code
+    class=property>transform</code></a>&rsquo;. Even so all animations apply
+    to the same gradient transformation by taking the value of the
+    &lsquo;<code class=property>gradientTransform</code>&rsquo; presentation
+    attribute, applying the scaling of the first animation and applying the
+    translation of the second animation one after the other.</p>
   </div>
+
+  <h4 id=svg-attribute-type><span class=secno>7.8.3. </span>The SVG
+   &lsquo;<code class=property>attributeType</code>&rsquo; attribute</h4>
+
+  <p> <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a>
+   defines the <a
+   href="http://www.w3.org/TR/SVG/animate.html#TargetAttributes">&lsquo;<code
+   class=property>attributeType</code>&rsquo;</a> attribute to specify the
+   namespace in which the target attribute and its associated values are
+   defined. The attribute can have the values &lsquo;<code
+   class=property>CSS</code>&rsquo;, &lsquo;<code
+   class=property>XML</code>&rsquo; or &lsquo;<code
+   class=property>auto</code>&rsquo;, where &lsquo;<code
+   class=property>auto</code>&rsquo; is the default value.
+
+  <p> However, in the combination with the &lsquo;<a href="#effects"><code
+   class=property>transform</code></a>&rsquo;, &lsquo;<code
+   class=property>patternTransform</code>&rsquo; and &lsquo;<code
+   class=property>gradientTransform</code>&rsquo; presentation attributes,
+   &lsquo;<code class=property>attributeType</code>&rsquo; can just be used
+   to indicate the syntax rules used for the transform attribute values. A
+   value of &lsquo;<code class=property>CSS</code>&rsquo; indicates that the
+   transform values should be parsed according to the CSS syntax. A value of
+   &lsquo;<code class=property>XML</code>&rsquo; indicates that the transform
+   values should be parsed according to the <a href="#svg-syntax">SVG
+   &lsquo;<code class=property>transform</code>&rsquo; syntax</a>.
+
+  <p> User agents are recommended to use the more tolerant <a
+   href="#svg-syntax">SVG &lsquo;<code class=property>transform</code>&rsquo;
+   syntax</a> for a value of &lsquo;<code class=property>auto</code>&rsquo;
+   to parse transform values.
+
+  <h4 id=svg-animateTransform-extension><span class=secno>7.8.4. </span>The
+   SVG &lsquo;<code class=property>animateTransform</code>&rsquo; element</h4>
+
+  <p> This specification introduces new transformation functions that are not
+   supported by <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1
+   Animation</a>. The <a
+   href="http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement">SVG
+   &lsquo;<code class=property>type</code>&rsquo; attribute</a> gets extended
+   by all transformation functions listed in <a
+   href="#two-d-transform-functions">2D Transformation Functions</a>, <a
+   href="#three-d-transform-functions">3D Transformation Functions</a> and <a
+   href="#svg-transformation-functions">SVG Transformation Functions</a>.</p>
   <!-- ======================================================================================================= -->
 
-  <h2 id=transform-origin-property><span class=secno>7. </span> The <a
+  <h2 id=transform-origin-property><span class=secno>8. </span> The <a
    href="#transform-origin"><code
    class=property>'transform-origin'</code></a> Property</h2>
 
@@ -1046,7 +1487,7 @@
   </div>
   <!-- ======================================================================================================= -->
 
-  <h2 id=transform-style-property><span class=secno>8. </span> The <a
+  <h2 id=transform-style-property><span class=secno>9. </span> The <a
    href="#transform-style"><code class=property>'transform-style'</code></a>
    Property</h2>
 
@@ -1126,7 +1567,7 @@
    matrix</i></a>, as described above.</p>
   <!-- ======================================================================================================= -->
 
-  <h2 id=perspective-property><span class=secno>9. </span> The <a
+  <h2 id=perspective-property><span class=secno>10. </span> The <a
    href="#perspective"><code class=property>'perspective'</code></a> Property
    </h2>
 
@@ -1190,7 +1631,7 @@
    matrix</i></a>, as described above.</p>
   <!-- ======================================================================================================= -->
 
-  <h2 id=perspective-origin-property><span class=secno>10. </span> The <a
+  <h2 id=perspective-origin-property><span class=secno>11. </span> The <a
    href="#perspective-origin"><code
    class=property>'perspective-origin'</code></a> Property</h2>
 
@@ -1253,7 +1694,7 @@
    matrix</i></a>, as described above.</p>
   <!-- ======================================================================================================= -->
 
-  <h2 id=backface-visibility-property><span class=secno>11. </span> The <a
+  <h2 id=backface-visibility-property><span class=secno>12. </span> The <a
    href="#backface-visibility"><code
    class=property>'backface-visibility'</code></a> Property</h2>
 
@@ -1333,7 +1774,7 @@
    viewport, or to the root of the 3D rendering context?</div>
   <!-- ======================================================================================================= -->
 
-  <h2 id=transform-functions><span class=secno>12. </span> The Transformation
+  <h2 id=transform-functions><span class=secno>13. </span> The Transformation
    Functions</h2>
 
   <p> The value of the <a href="#effects"><code
@@ -1343,12 +1784,12 @@
    transform functions is given below. In this list the type
    &lt;translation-value&gt; is defined as a &lt;length&gt; or
    &lt;percentage&gt; value, and the &lt;angle&gt; type is defined by <a
-   href="http://www.w3.org/TR/css3-values/">CSS Values and Units.</a>
+   href="http://www.w3.org/TR/css3-values/">CSS Values and Units Module.</a>
    Wherever &lt;angle&gt; is used in this specification, a &lt;number&gt;
    that is equal to zero is also allowed, which is treated the same as an
    angle of zero degrees.
 
-  <h3 id=two-d-transform-functions><span class=secno>12.1. </span>2D
+  <h3 id=two-d-transform-functions><span class=secno>13.1. </span>2D
    Transformation Functions</h3>
 
   <dl>
@@ -1395,17 +1836,13 @@
    <dd> specifies a <a href="#ScaleDefined">2D scale</a> operation using the
     [1,sy] scaling vector, where sy is given as the parameter.
 
-   <dt> <code class=css>rotate(&lt;angle&gt;[, &lt;translation-value&gt;,
-    &lt;translation-value&gt;])</code>
+   <dt> <code class=css>rotate(&lt;angle&gt;)</code>
 
    <dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle
     specified in the parameter about the origin of the element, as defined by
-    the <a href="#transform-origin"><em>transform-origin</em></a> property,
-    or a given point as to the origin of the element. For example,
-    rotate(90deg) would cause elements to appear rotated one-quarter of a
-    turn in the clockwise direction. With rotate(90deg, 100px, 100px) the
-    element appears rotated after a translation of 100px in the vertical and
-    horizontal direction. The actual origin of the element is not affected.
+    the <a href="#transform-origin"><em>transform-origin</em></a> property.
+    For example, rotate(90deg) would cause elements to appear rotated
+    one-quarter of a turn in the clockwise direction.
 
    <dt> <code class=css>skew(&lt;angle&gt;[, &lt;angle&gt;])</code>
 
@@ -1423,7 +1860,7 @@
     axis</a> by the given angle. The skew vector is [0,ay].
   </dl>
 
-  <h3 id=three-d-transform-functions><span class=secno>12.2. </span>3D
+  <h3 id=three-d-transform-functions><span class=secno>13.2. </span>3D
    Transformation Functions</h3>
 
   <dl>
@@ -1504,7 +1941,7 @@
   </dl>
   <!-- ======================================================================================================= -->
 
-  <h2 id=transform-values><span class=secno>13. </span> Transform Values and
+  <h2 id=transform-values><span class=secno>14. </span> Transform Values and
    Lists</h2>
 
   <p> The &lt;translation-value&gt; values are defined as [&lt;percentage&gt;
@@ -1537,7 +1974,7 @@
    is the matrix multiplication of the list of transforms.</p>
   <!-- ======================================================================================================= -->
 
-  <h2 id=animation><span class=secno>14. </span> Transitions and Animations
+  <h2 id=animation><span class=secno>15. </span> Transitions and Animations
    between Transform Values</h2>
 
   <p> When animating or transitioning the value of a transform property the
@@ -1625,7 +2062,7 @@
    from 1 to -1. At the time when the matrix is in such a state, the
    transformed element is not rendered.
 
-  <h2 id=matrix-decomposition><span class=secno>15. </span> Matrix
+  <h2 id=matrix-decomposition><span class=secno>16. </span> Matrix
    Decomposition for Animation</h2>
 
   <p> When interpolating between 2 matrices, each is decomposed into the
@@ -1636,7 +2073,7 @@
    "Graphics Gems II, edited by Jim Arvo". The pseudocode below works on a
    4x4 homogeneous matrix.
 
-  <h3 id=unmatrix><span class=secno>15.1. </span>Unmatrix</h3>
+  <h3 id=unmatrix><span class=secno>16.1. </span>Unmatrix</h3>
 
   <pre>
           Input:  matrix      ; a 4x4 matrix
@@ -1772,7 +2209,7 @@
 
           return true;</pre>
 
-  <h3 id=animating-the-components><span class=secno>15.2. </span>Animating
+  <h3 id=animating-the-components><span class=secno>16.2. </span>Animating
    the components</h3>
 
   <p> Once decomposed, each component of each returned value of the source
@@ -1781,7 +2218,7 @@
    are interpolated numerically, and the result is used to set the
    translation of the animating element.
 
-  <h3 id=recomposing-the-matrix><span class=secno>15.3. </span>Recomposing
+  <h3 id=recomposing-the-matrix><span class=secno>16.3. </span>Recomposing
    the matrix</h3>
 
   <p><em>This section is not normative.</em>
@@ -1802,7 +2239,7 @@
           matrix3d(1,0,0,0, skew[0],1,0,0, 0,0,1,0, 0,0,0,1)
           scale3d(scale[0], scale[1], scale[2])</pre>
 
-  <h2 id=mathematical-description><span class=secno>16. </span> Mathematical
+  <h2 id=mathematical-description><span class=secno>17. </span> Mathematical
    Description of Transformation Functions</h2>
 
   <p> Mathematically, all transformation functions can be represented as 4x4
@@ -1896,7 +2333,7 @@
     height=106 src=perspective.png width=143>
   </ul>
 
-  <h2 id=references><span class=secno>17. </span>References</h2>
+  <h2 id=references><span class=secno>18. </span>References</h2>
 
   <h3 class=no-num id=normative-references>Normative references</h3>
   <!--begin-normative-->
@@ -2057,7 +2494,7 @@
     title="3D rendering context"><strong>4.</strong></a>
 
    <li>backface-visibility, <a href="#backface-visibility"
-    title=backface-visibility><strong>11.</strong></a>
+    title=backface-visibility><strong>12.</strong></a>
 
    <li>bounding box, <a href="#bounding-box"
     title="bounding box"><strong>4.</strong></a>
@@ -2066,10 +2503,10 @@
     title="perpsective matrix"><strong>4.</strong></a>
 
    <li>perspective, <a href="#perspective"
-    title=perspective><strong>9.</strong></a>
+    title=perspective><strong>10.</strong></a>
 
    <li>perspective-origin, <a href="#perspective-origin"
-    title=perspective-origin><strong>10.</strong></a>
+    title=perspective-origin><strong>11.</strong></a>
 
    <li>transform, <a href="#effects" title=transform><strong>6.</strong></a>
 
@@ -2080,10 +2517,10 @@
     title="transformation matrix"><strong>4.</strong></a>
 
    <li>transform-origin, <a href="#transform-origin"
-    title=transform-origin><strong>7.</strong></a>
+    title=transform-origin><strong>8.</strong></a>
 
    <li>transform-style, <a href="#transform-style"
-    title=transform-style><strong>8.</strong></a>
+    title=transform-style><strong>9.</strong></a>
   </ul>
   <!--end-index-->
 </html>

Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.32
retrieving revision 1.33
diff -u -d -r1.32 -r1.33
--- Transforms.src.html	22 Feb 2012 18:45:35 -0000	1.32
+++ Transforms.src.html	24 Feb 2012 19:42:21 -0000	1.33
@@ -507,7 +507,7 @@
                 <p class="desc">Should intersection behavior be normative?</p>
               </div>
               <p>
-                Elements in the same <span class="term">3D rendering context</span> may intersect with eachother. User agents should
+                Elements in the same <span class="term">3D rendering context</span> may intersect with each other. User agents should
                 subdivide the planes of intersecting elements as described by
                 <a href="http://en.wikipedia.org/wiki/Newell's_algorithm">Newell's algorithm</a> to render intersection.
               </p>
@@ -665,41 +665,336 @@
 
               <!-- ======================================================================================================= -->
               
-              <h3 id="svg-transform">The SVG transform attribute</h3>
+              <h2 id="svg-transform">
+                The SVG 'transform' Attribute
+              </h2>
               
-              <p>The <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">SVG 1.1 specification</a> did not
-                  specify the 'transform' attribute as a <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes">presentation attribute</a>. 
-                  In order to improve the integration of
-                  SVG and HTML, this specification makes the SVG 'transform' attribute a 
-                  'presentation attribute' and makes the 'transform' property one that applies to SVG elements.</p>
-                  
-              <h4 id="transform-attribute-specificity">SVG transform attribute specificity</h4>
+              <p>
+                The <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">SVG 1.1 specification</a> did not
+                specify the attributes 'transform', 'gradientTransform' or 'patternTransform' as
+                <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes">presentation attributes</a>. 
+                In order to improve the integration of SVG and HTML, this specification makes these SVG attributes to 
+                'presentation attributes' and makes the 'transform' property one that applies to transformable elements in the SVG namespace.
+              </p>
               
-              <p>Since the SVG attribute becomes a presentation attribute, its participation to the CSS 
+              <p>
+                This specification will also introduce the new presentation attributes <a href="#transform-origin-property">'transform-origin'</a>,
+                <a href="#perspective-property">'perspective'</a>, <a href="#perspective-origin-property">'perspective-origin'</a>,
+                <a href="#transform-style-property">'transform-style'</a> and <a href="#backface-visibility-property">'backface-visibility'</a>
+                in the SVG namespace. All new introduced presentation attributes are animateable.
+              </p>
+              
+              <h3 id="transform-attribute-specificity">SVG 'transform' attribute specificity</h3>
+              
+              <p>Since the previously named SVG attributes become presentation attributes, their participation to the CSS 
                   cascade is determined by the specificity of presentation attributes, as 
                   <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes">explained</a>
-                  in the SVG specification.</p>
-                  
-              <h4 id="transform-attribute-dom">SVG transform attribute DOM</h4>
+                  in the SVG specification.
+              </p>
+
+              <div class="example">
+                <p>
+                  This example shows the combination of the 'transform' style property and the 'transform' presentation attribute.
+                </p>
+
+                <pre>&lt;svg&gt;
+    &lt;style&gt;
+    .container {
+        transform: translate(100px, 100px);
+    }
+    &lt;/style&gt;
+
+    &lt;g class="container" transform="translate  (200 200)"&gt;
+        &lt;rect width="100" height="100" fill="blue" /&gt;
+    &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+                <div class="figure">
+                  <img src="examples/svg-translate.png" width="200" height="200" alt="Translated SVG container element.">
+                </div>
+
+                <p>
+                  Because of the participation to the CSS cascade, the 'transform' style property overrides the 'transform' presentation
+                  attribute. Therefore the container gets translated by 100px in horizontal and vertical direction, instead of 200px.
+                </p>
+              </div>
               
-              <p>The SVG specification <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">defines</a> a DOM interface to access the animated and base value of 
-                  the SVG transform attribute. To ensure backwards compatibility, this API should still be
-                  supported by user agents. The <code>baseVal</code> should be the value of the 'transform' attribute, 
-                  as set on the element, and the <code>animVal</code> should be the property's computed value which account
-                  for CSS animation, if any is underway.</p>
-                  
+              <h3 id="svg-syntax">Syntax for SVG 'transform' attribute</h3>
+              
+              <p>
+                To provide backward compatibility, the syntax of the 'transform' presentation attribute differs from
+                the syntax of the 'transform' style property like shown in the example above. However, the syntax
+                used for the 'transform' style property can be used for a 'transform' presentation attribute value.
+                Authors are advised to follow the rules of <a href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values and Units Module</a>.
+                Therefore an author should write <code>transform="translate(200px, 200px)"</code> instead of
+                <code>transform="translate  (200 200)"</code> because the second example with the spaces before the '(',
+                the missing comma between the arguments and the values without the explicit unit notation would be valid for
+                the attribute only.
+              </p>
+              
+              <h4 id="svg-transform-list">Transform List</h4>
+              
+              <p>
+                The value for the 'transform' attribute consists of a transform list with zero or more transformation functions
+                in the <a href="#svg-functional-notation">functional notation</a>. If the transform list consists of more than one
+                transformation function, these functions are separated by either a comma (‘,’) with optional whitespace
+                before and after the comma or one or more whitespaces. The transform list can have
+                optional whitespaces before and after the list.
+              </p>
+              
+              <h4 id="svg-functional-notation">Functional Notations</h4>
+              
+              <p>
+                The syntax starts with the name of the function followed by optional whitespaces followed by a left
+                parenthesis followed by optional whitespace followed by the argument(s) to the notation followed by
+                optional whitespace followed by a right parenthesis. If a function takes more than one argument, the
+                arguments are either separated by a comma (‘,’) with optional whitespace before and after the comma
+                or one or more whitespaces.
+              </p>
+              
+              <h4 id="svg-data-types">SVG Data Types</h4>
+              
+              <p>
+                Arguments of transformation functions consists of data types in the sense of
+                <a href="http://www.w3.org/TR/css3-values/#functional-notation">CSS Values and Units Module</a>. The definitions of
+                data types in CSS Values and Units Module gets enhanced as follows:
+              </p>
+              
+              <h5 id="svg-transform-value">The '&lt;translation-value&gt;' and '&lt;length&gt;' type</h5>
+              
+              <p>
+                A translation-value or length can be a '&lt;number&gt;' without an unit identifier. In this case
+                the <a href="#svg-number"><i>number</i></a> gets interpreted as "user unit". A user unit in the the
+                <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem">initial
+                coordinate system</a> is equivalenced to the parent environment's notion of a px unit.
+              </p>
+              
+              <h5 id="svg-angle">The '&lt;angle&gt;' type</h5>
+                
+              <p>
+                An angle can be a '&lt;number&gt;' without an unit identifier. In this case the <a href="#svg-number"><i>number</i></a>
+                gets interpreted as a value in degrees.
+              </p>
+              
+              <h5 id="svg-number">The '&lt;number&gt;' type</h5>
+              
+              <p>
+                SVG supports scientific notations for numbers. Therefore a <i>number</i> gets parsed like described in SVG
+                <a href="http://www.w3.org/TR/SVG/types.html#DataTypeNumber">Basic data types</a> for SVG attributes.
+              </p>
+              
+              <h3 id="svg-gradient-transform-pattern-transform">The SVG 'gradientTransform' and 'patternTransform' attributes</h3>
+              
+              <p>
+                SVG specifies the attributes 'gradientTransform' and 'patternTransform'. This specification
+                makes both attributes to presentation attributes. Both attributes use the same <a href="#svg-syntax">syntax</a> as
+                the SVG 'transform' attribute. This specification won't introduce corresponding CSS style properties. Instead the
+                style can be set by the <a href="#transform-property">'transform'</a> style property.
+              </p>
+              
+              <h3 id="svg-three-dimensional-functions">SVG 'transform' attribute and 3D transformation functions</h3>
+              
+              <p>
+                This specification explicitly allows to apply three-dimensional transformation functions to the SVG container elements:
+                'a', 'g', 'svg', the SVG graphics elements: ‘circle’, ‘ellipse’, ‘image’, ‘line’, ‘path’, ‘polygon’, ‘polyline’, ‘rect’,
+                ‘text’, the SVG referencing element 'use' and the SVG 'foreignObject' element.
+              </p>
+
               <div class="issue">
-                  <ul>
-                      <li>Should we also make gradientTransform and patternTransform presentation attributes? 
-                          Proposal: they 
-                          are the 'presentation attributes' for &lt;gradient&gt; and &gt;pattern&lt; respectively,
-                          for the 'transform' property (i.e., there is no 'gradientTransform' property. Instead, the
-                          'gradientTransform' is a presentation attribute that provides a value for the 
-                          'transform' property that applies to the &lt;gradient&gt; element.)</li>
-                      <li>Is this proposal working for SMIL animation of the transform property?</li>
-                  </ul>
+                <p>
+                  Either allow 3D transformation functions on children of patterns, mask and others and explain how to flatten the results, or use
+                  the following wording:
+                </p>
+  
+                <p>
+                  Three-dimensional transformation functions are not allowed for the elements: 'clipPath', 'mask', 'linearGradient',
+                  'radialGradient', 'pattern' or any child elements (including elements referenced by the 'use' element) in the rendering
+                  context of these elements. If a transform list of these elements includes a three-dimensional transformation function,
+                  the complete transform list must be ignored for this element. The 'perspective', 'perspective-origin', 'transform-style'
+                  and 'backface-visibility' presentation attributes get ignored as well. Future versions of this specification might define
+                  exceptions for this rule.
+                </p>
+              
+              <div class="example">
+                <p>
+                  This example has a 'pattern' element with the child element 'rect'. This child element has a three-dimensional
+                  transformation function. The 'use' element after the pattern definition references this 'rect'.
+                </p>
+                
+                <pre>&lt;svg&gt;
+    &lt;defs&gt;
+    &lt;pattern id="pattern-1"&gt;
+        &lt;rect id="rect1" width="100" height="100" fill="blue" transform="rotateX(45deg)" /&gt;
+    &lt;/pattern&gt;
+    &lt;/defs&gt;
+
+    &lt;use x="100" y="0" xlink:href="rect1" /&gt;
+    
+    &lt;circle cx="50" cy="50" r="50" fill="url(#pattern-1)" /&gt;
+&lt;/svg&gt;</pre>
+                
+                <p>
+                  For the pattern the transform list of this rect gets ignored since it is in the rendering context of the pattern.
+                  For the 'use' element, the three-dimensional transformation function gets applied, since it is not in ther
+                  rendering context of the pattern anymore.
+                </p>
+              
+              </div>
+              </div>
+              
+              <h3 id="svg-transformation-functions">SVG transformation functions</h3>
+              
+              <p>
+                For backward compatibility to existing SVG content, this specification must support all transformation functions
+                defined by <a href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">The 'transform' attribute</a> in SVG 1.1.
+                Therefore the two-dimensional transformation function <a href="#two-d-transform-functions">'rotate'</a>
+                gets extended as follows:
+              </p>
+              
+              <dl>
+                <dt>
+                  <code class="css">rotate(&lt;angle&gt;[, &lt;translation-value&gt;, &lt;translation-value&gt;])</code>
+                </dt>
+                <dd>
+                  specifies a <a href="#RotateDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined
+                  by the <em>transform-origin</em> property. If the optional translation values are specified, the transform origin is translated by that amount
+                  (using the current transformation matrix) for the duration of the rotate operation.
+                  For example rotate(90deg, 100px, 100px) would elements cause to appear rotated one-quarter of a turn in the clockwise direction after a translation
+                  of 100px in the vertical and horizontal direction.
+                </dd>
+              </dl>
+              
+              <p>
+                User agents are just required to support the two optional arguments for translation on elements in the SVG namespace.
+              </p>
+
+              <h3 id="svg-object-bounding-box">Object bounding box units</h3>
+              
+              <p>
+                Percentage or fractional values in SVG are either relative to the elements viewport units or to the elements
+                <a href="http://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits">object bounding box units</a> like
+                specified in SVG 1.1. To align with HTML, all percentage values for all properties defined in this specification
+                are relative to the object bounding box units.
+              </p>
+              
+              <p>
+                If an SVG element does not provide an object bounding box (like for the 'pattern', 'mask' or 'clipPath' elements), the bounding box
+                is the same like if the position x, y and the dimensions width and height are zero. Percentage values or keywords won't affect the
+                rendering and occur as if zero was specified.
+              </p>
+              
+              <div class="example">
+                <p>
+                  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.
+                </p>
+                
+                <pre>&lt;svg&gt;
+    &lt;style&gt;
+    pattern {
+        transform: translate(50px, 50px) rotate(45deg);
+        transform-origin: 50% 50%;
+    }
+    &lt;/style&gt;
+    
+    &lt;defs&gt;
+    &lt;pattern id="pattern-1"&gt;
+        &lt;rect id="rect1" width="100" height="100" fill="blue" /&gt;
+    &lt;/pattern&gt;
+    &lt;/defs&gt;
+
+    &lt;rect width="100" height="100" fill="url(#pattern-1)" /&gt;
+&lt;/svg&gt;</pre>
+
+                <p>
+                  A SVG 'pattern' element doesn't have an object bounding box. Therefore the relative values of the 'transform-origin' property
+                  don't affect the rendering and are treated as if zero was specified. The translation on the 'transform' property is in
+                  absolute coordinates and translate the coordinate system by 50 pixel in each direction.
+                </p>
+              </div>
+                                
+              <h3 id="transform-attribute-dom">SVG 'transform' attribute DOM</h3>
+              
+              <p>
+                The SVG specification <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">defines</a>
+                a DOM interface to access the animated and base value of the SVG transform attribute. To ensure backwards compatibility,
+                this API should still be supported by user agents. The <code>baseVal</code> should be the value of the 'transform' attribute, 
+                as set on the element, and the <code>animVal</code> should be the property's computed value which account for CSS animation, if
+                any is underway.
+              </p>
+              
+              <div class="issue">
+                <p>
+                  The SVG WG as well as the FX task force solved issues with 'baseVal' and 'animVal'. This section needs to address the resolutions.
+                </p>
+              </div>
+                  
+              <h3 id="svg-animation">SVG Animation</h3>
+              
+                
+              <h4 id="svg-animate-element">The SVG 'animate' and 'set' element</h4>
+              
+              <p>
+                The SVG 1.1 specification did not define animations of the 'transform' attribute for the SVG 'animate' element or the SVG 'set' element.
+                This specification explicitly allows the animation of the presentation attributes 'transform', 'gradientTransform' and 'patternTransform'
+                for the 'animate' and 'set' elements. SVG animation must run the same animation steps as described in section
+                <a href="#animation">Transitions and Animations between Transform Values</a>.
+              </p>
+
+              <h4 id="svg-attribute-name">The SVG 'attributeName' attribute</h4>
+
+              <p>
+                <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a> defines the <a href="http://www.w3.org/TR/SVG/animate.html#TargetAttributes">'attributeName'</a> 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 presentation attribute style will get animated.
+              </p>
+              
+              <div class="example">
+                <p>
+                  In this example the gradient transformation of the linear gradient gets animated.
+                </p>
+
+                <pre>&lt;linearGradient gradientTransform="scale(2)"&gt;
+    &lt;animate attributeName="gradientTransform" from="scale(2)" to="scale(4)"
+          dur="3s" additive="sum"/&gt;
+    &lt;animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)"
+          dur="3s" additive="sum"/&gt;
+&lt;/linearGradient&gt;</pre>
+
+                <p>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.</p>
               </div>
 
+              <h4 id="svg-attribute-type">The SVG 'attributeType' attribute</h4>
+              
+              <p>
+                <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a> defines the <a href="http://www.w3.org/TR/SVG/animate.html#TargetAttributes">'attributeType'</a> attribute to specify the
+                namespace in which the target attribute and its associated values are defined. The attribute can have the values 'CSS', 'XML' or
+                'auto', where 'auto' is the default value.
+              </p>
+              
+              <p>
+                However, in the combination with the 'transform', 'patternTransform' and 'gradientTransform' presentation attributes, 'attributeType'
+                can just be used to indicate the syntax rules used for the transform attribute values. A value of 'CSS' indicates that the transform values should
+                be parsed according to the CSS syntax. A value of 'XML' indicates that the transform values should be parsed according to the
+                <a href="#svg-syntax">SVG 'transform' syntax</a>.
+              </p>
+              
+              <p>
+                User agents are recommended to use the more tolerant <a href="#svg-syntax">SVG 'transform' syntax</a> for a value of 'auto' to parse transform values.
+              </p>
+              
+              <h4 id="svg-animateTransform-extension">The SVG 'animateTransform' element</h4>
+              
+              <p>
+                This specification introduces new transformation functions that are not supported by <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a>. The
+                <a href="http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement">SVG 'type' attribute</a> gets extended by all
+                transformation functions listed in <a href="#two-d-transform-functions">2D Transformation Functions</a>,
+                <a href="#three-d-transform-functions">3D Transformation Functions</a> and <a href="#svg-transformation-functions">SVG
+                Transformation Functions</a>.
+              </p>
+
               <!-- ======================================================================================================= -->
 
               <h2 id="transform-origin-property">
@@ -1209,7 +1504,7 @@
                 set of allowed transform functions is given below. In this list the
                 type &lt;translation-value&gt; is defined as a &lt;length&gt; or
                 &lt;percentage&gt; value, and the &lt;angle&gt; type is defined by <a
-                href="http://www.w3.org/TR/css3-values/">CSS Values and Units.</a>
+                href="http://www.w3.org/TR/css3-values/">CSS Values and Units Module.</a>
                 Wherever &lt;angle&gt; is used in this specification, a &lt;number&gt; that is equal to
                 zero is also allowed, which is treated the same as an angle of zero degrees.
               </p>
@@ -1260,11 +1555,12 @@
                   specifies a <a href="#ScaleDefined">2D scale</a> operation using the [1,sy] scaling vector, where sy is given as the parameter.
                 </dd>
                 <dt>
-                  <code class="css">rotate(&lt;angle&gt;[, &lt;translation-value&gt;, &lt;translation-value&gt;])</code>
+                  <code class="css">rotate(&lt;angle&gt;)</code>
                 </dt>
                 <dd>
-                  specifies a <a href="#RotateDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the <em>transform-origin</em> property, or a given point as to the origin of the element. For example, rotate(90deg) would cause elements to appear
-                  rotated one-quarter of a turn in the clockwise direction. With rotate(90deg, 100px, 100px) the element appears rotated after a translation of 100px in the vertical and horizontal direction. The actual origin of the element is not affected.
+                  specifies a <a href="#RotateDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as
+                  defined by the <em>transform-origin</em> property. For example, rotate(90deg) would cause elements to appear rotated one-quarter
+                  of a turn in the clockwise direction.
                 </dd>
                 <dt>
                   <code class="css">skew(&lt;angle&gt;[, &lt;angle&gt;])</code>

Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.19
retrieving revision 1.20
diff -u -d -r1.19 -r1.20
--- ChangeLog	22 Feb 2012 18:45:34 -0000	1.19
+++ ChangeLog	24 Feb 2012 19:42:21 -0000	1.20
@@ -1,3 +1,13 @@
+2012-02-24 dschulze@adobe.com
+    Removed 2 optional arguments for rotate from the 2D transformation function, re-added it for the SVG 'transform' attribute
+      with the note that UAs are just required to support it for SVG.
+    Added the SVG transform syntax that was already accepted by the SVG WG.
+    Added a section how to extend SVG animation to support CSS transforms.
+    Added a section how 3D transformation functions affect SVG elements.
+    Described the behavior of percentage values on transformation functions and transform-origin for SVG.
+    Described how CSS transform property affects 'gradientTransform' and 'patternTransform'.
+    Specified that all new introduced properties get presentation attributes beside 'transform' for SVG.
+
 2012-02-22 simon.fraser@apple.com
     Fix more validation issues.
 
Received on Friday, 24 February 2012 19:42:28 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC