- From: Dirk Schulze via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 24 Feb 2012 19:42:24 +0000
- To: public-css-commits@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
+ ‘<code class=property>transform</code>’ 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 ‘<code class=property>transform</code>’
+ attribute specificity</a>
+
+ <li><a href="#svg-syntax"><span class=secno>7.2. </span>Syntax for SVG
+ ‘<code class=property>transform</code>’ 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 ‘<code
+ class=css><translation-value></code>’ and ‘<code
+ class=css><length></code>’ type</a>
+
+ <li><a href="#svg-angle"><span class=secno>7.2.3.2. </span>The
+ ‘<code class=css><angle></code>’ type</a>
+
+ <li><a href="#svg-number"><span class=secno>7.2.3.3. </span>The
+ ‘<code class=css><number></code>’ type</a>
+ </ul>
+ </ul>
+
+ <li><a href="#svg-gradient-transform-pattern-transform"><span
+ class=secno>7.3. </span>The SVG ‘<code
+ class=property>gradientTransform</code>’ and ‘<code
+ class=property>patternTransform</code>’ attributes</a>
+
+ <li><a href="#svg-three-dimensional-functions"><span class=secno>7.4.
+ </span>SVG ‘<code class=property>transform</code>’
+ 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
+ ‘<code class=property>transform</code>’ 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 ‘<code class=property>animate</code>’ and
+ ‘<code class=property>set</code>’ element</a>
+
+ <li><a href="#svg-attribute-name"><span class=secno>7.8.2. </span>The
+ SVG ‘<code class=property>attributeName</code>’
+ attribute</a>
+
+ <li><a href="#svg-attribute-type"><span class=secno>7.8.3. </span>The
+ SVG ‘<code class=property>attributeType</code>’
+ attribute</a>
+
+ <li><a href="#svg-animateTransform-extension"><span class=secno>7.8.4.
+ </span>The SVG ‘<code
+ class=property>animateTransform</code>’ 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 ‘<a
+ href="#effects"><code class=property>transform</code></a>’ Attribute
+ </h2>
- <p>The <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">SVG 1.1
- specification</a> did not specify the ‘<a href="#effects"><code
- class=property>transform</code></a>’ 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 ‘<a
+ href="#effects"><code class=property>transform</code></a>’,
+ ‘<code class=property>gradientTransform</code>’ or
+ ‘<code class=property>patternTransform</code>’ 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 ‘<a href="#effects"><code
- class=property>transform</code></a>’ attribute a ‘<code
- class=css>presentation attribute</code>’ and makes the ‘<a
+ attributes</a>. In order to improve the integration of SVG and HTML, this
+ specification makes these SVG attributes to ‘<code
+ class=css>presentation attributes</code>’ and makes the ‘<a
href="#effects"><code class=property>transform</code></a>’ 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">‘<code
+ class=property>transform-origin</code>’</a>, <a
+ href="#perspective-property">‘<code
+ class=property>perspective</code>’</a>, <a
+ href="#perspective-origin-property">‘<code
+ class=property>perspective-origin</code>’</a>, <a
+ href="#transform-style-property">‘<code
+ class=property>transform-style</code>’</a> and <a
+ href="#backface-visibility-property">‘<code
+ class=property>backface-visibility</code>’</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
+ ‘<a href="#effects"><code class=property>transform</code></a>’
+ 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 ‘<a
+ href="#effects"><code class=property>transform</code></a>’ style
+ property and the ‘<a href="#effects"><code
+ class=property>transform</code></a>’ presentation attribute.</p>
- <p>The SVG specification <a
+ <pre><svg>
+ <style>
+ .container {
+ transform: translate(100px, 100px);
+ }
+ </style>
+
+ <g class="container" transform="translate (200 200)">
+ <rect width="100" height="100" fill="blue" />
+ </g>
+</svg></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 ‘<a
+ href="#effects"><code class=property>transform</code></a>’ style
+ property overrides the ‘<a href="#effects"><code
+ class=property>transform</code></a>’ 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 ‘<a
+ href="#effects"><code class=property>transform</code></a>’ attribute</h3>
+
+ <p> To provide backward compatibility, the syntax of the ‘<a
+ href="#effects"><code class=property>transform</code></a>’
+ presentation attribute differs from the syntax of the ‘<a
+ href="#effects"><code class=property>transform</code></a>’ style
+ property like shown in the example above. However, the syntax used for the
+ ‘<a href="#effects"><code class=property>transform</code></a>’
+ style property can be used for a ‘<a href="#effects"><code
+ class=property>transform</code></a>’ 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 ‘<code class=css>(</code>’, 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 ‘<a href="#effects"><code
+ class=property>transform</code></a>’ 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
+ ‘<code class=css><translation-value></code>’ and
+ ‘<code class=css><length></code>’ type</h5>
+
+ <p> A translation-value or length can be a ‘<code
+ class=css><number></code>’ 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 ‘<code
+ class=css><angle></code>’ type</h5>
+
+ <p> An angle can be a ‘<code class=css><number></code>’
+ 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 ‘<code
+ class=css><number></code>’ 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 ‘<code class=property>gradientTransform</code>’
+ and ‘<code class=property>patternTransform</code>’ attributes</h3>
+
+ <p> SVG specifies the attributes ‘<code
+ class=property>gradientTransform</code>’ and ‘<code
+ class=property>patternTransform</code>’. This specification makes
+ both attributes to presentation attributes. Both attributes use the same
+ <a href="#svg-syntax">syntax</a> as the SVG ‘<a
+ href="#effects"><code class=property>transform</code></a>’
+ attribute. This specification won't introduce corresponding CSS style
+ properties. Instead the style can be set by the <a
+ href="#transform-property">‘<code
+ class=property>transform</code>’</a> style property.
+
+ <h3 id=svg-three-dimensional-functions><span class=secno>7.4. </span>SVG
+ ‘<a href="#effects"><code class=property>transform</code></a>’
+ attribute and 3D transformation functions</h3>
+
+ <p> This specification explicitly allows to apply three-dimensional
+ transformation functions to the SVG container elements: ‘<code
+ class=property>a</code>’, ‘<code
+ class=property>g</code>’, ‘<code
+ class=property>svg</code>’, the SVG graphics elements: ‘circle’,
+ ‘ellipse’, ‘image’, ‘line’, ‘path’, ‘polygon’,
+ ‘polyline’, ‘rect’, ‘text’, the SVG referencing element
+ ‘<code class=property>use</code>’ and the SVG ‘<code
+ class=property>foreignObject</code>’ 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: ‘<code class=property>clipPath</code>’,
+ ‘<code class=property>mask</code>’, ‘<code
+ class=property>linearGradient</code>’, ‘<code
+ class=property>radialGradient</code>’, ‘<code
+ class=property>pattern</code>’ or any child elements (including
+ elements referenced by the ‘<code class=property>use</code>’
+ 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
+ ‘<a href="#perspective"><code
+ class=property>perspective</code></a>’, ‘<a
+ href="#perspective-origin"><code
+ class=property>perspective-origin</code></a>’, ‘<a
+ href="#transform-style"><code
+ class=property>transform-style</code></a>’ and ‘<a
+ href="#backface-visibility"><code
+ class=property>backface-visibility</code></a>’ 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 ‘<code class=property>pattern</code>’
+ element with the child element ‘<code
+ class=property>rect</code>’. This child element has a
+ three-dimensional transformation function. The ‘<code
+ class=property>use</code>’ element after the pattern definition
+ references this ‘<code class=property>rect</code>’.</p>
+
+ <pre><svg>
+ <defs>
+ <pattern id="pattern-1">
+ <rect id="rect1" width="100" height="100" fill="blue" transform="rotateX(45deg)" />
+ </pattern>
+ </defs>
+
+ <use x="100" y="0" xlink:href="rect1" />
+
+ <circle cx="50" cy="50" r="50" fill="url(#pattern-1)" />
+</svg></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 ‘<code
+ class=property>use</code>’ 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
+ ‘<code class=property>transform</code>’ attribute</a> in SVG
+ 1.1. Therefore the two-dimensional transformation function <a
+ href="#two-d-transform-functions">‘<code
+ class=property>rotate</code>’</a> gets extended as follows:
+
+ <dl>
+ <dt> <code class=css>rotate(<angle>[, <translation-value>,
+ <translation-value>])</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
+ ‘<code class=property>pattern</code>’, ‘<code
+ class=property>mask</code>’ or ‘<code
+ class=property>clipPath</code>’ 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 ‘<a href="#transform-origin"><code
+ class=property>transform-origin</code></a>’ property on the pattern
+ in the following example specifies a 50% translation of the origin in the
+ horizontal and vertical dimension. The ‘<a href="#effects"><code
+ class=property>transform</code></a>’ property specifies a
+ translation as well, but in absolute lengths.</p>
+
+ <pre><svg>
+ <style>
+ pattern {
+ transform: translate(50px, 50px) rotate(45deg);
+ transform-origin: 50% 50%;
+ }
+ </style>
+
+ <defs>
+ <pattern id="pattern-1">
+ <rect id="rect1" width="100" height="100" fill="blue" />
+ </pattern>
+ </defs>
+
+ <rect width="100" height="100" fill="url(#pattern-1)" />
+</svg></pre>
+
+ <p> A SVG ‘<code class=property>pattern</code>’ element
+ doesn't have an object bounding box. Therefore the relative values of the
+ ‘<a href="#transform-origin"><code
+ class=property>transform-origin</code></a>’ property don't affect
+ the rendering and are treated as if zero was specified. The translation
+ on the ‘<a href="#effects"><code
+ class=property>transform</code></a>’ 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 ‘<a
+ href="#effects"><code class=property>transform</code></a>’ 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 ‘<code
- class=css>presentation attributes</code>’ for <gradient> and
- >pattern< respectively, for the ‘<a href="#effects"><code
- class=property>transform</code></a>’ property (i.e., there is no
- ‘<code class=property>gradientTransform</code>’ property.
- Instead, the ‘<code class=property>gradientTransform</code>’
- is a presentation attribute that provides a value for the ‘<a
- href="#effects"><code class=property>transform</code></a>’
- property that applies to the <gradient> element.)
+ <p> The SVG WG as well as the FX task force solved issues with
+ ‘<code class=property>baseVal</code>’ and ‘<code
+ class=property>animVal</code>’. 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
+ ‘<code class=property>animate</code>’ and ‘<code
+ class=property>set</code>’ element</h4>
+
+ <p> The SVG 1.1 specification did not define animations of the ‘<a
+ href="#effects"><code class=property>transform</code></a>’ attribute
+ for the SVG ‘<code class=property>animate</code>’ element or
+ the SVG ‘<code class=property>set</code>’ element. This
+ specification explicitly allows the animation of the presentation
+ attributes ‘<a href="#effects"><code
+ class=property>transform</code></a>’, ‘<code
+ class=property>gradientTransform</code>’ and ‘<code
+ class=property>patternTransform</code>’ for the ‘<code
+ class=property>animate</code>’ and ‘<code
+ class=property>set</code>’ 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
+ ‘<code class=property>attributeName</code>’ 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">‘<code
+ class=property>attributeName</code>’</a> attribute to specify the
+ name of the target attribute. For the presentation attributes ‘<code
+ class=property>gradientTransform</code>’ and ‘<code
+ class=property>patternTransform</code>’ it will also be possible to
+ use the value ‘<a href="#effects"><code
+ class=property>transform</code></a>’. 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><linearGradient gradientTransform="scale(2)">
+ <animate attributeName="gradientTransform" from="scale(2)" to="scale(4)"
+ dur="3s" additive="sum"/>
+ <animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)"
+ dur="3s" additive="sum"/>
+</linearGradient></pre>
+
+ <p>The ‘<code class=property>linearGradient</code>’ element
+ specifies the ‘<code class=property>gradientTransform</code>’
+ presentation attribute. The two ‘<code
+ class=property>animate</code>’ elements address the target
+ attribute ‘<code class=property>gradientTransform</code>’ and
+ ‘<a href="#effects"><code
+ class=property>transform</code></a>’. Even so all animations apply
+ to the same gradient transformation by taking the value of the
+ ‘<code class=property>gradientTransform</code>’ 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
+ ‘<code class=property>attributeType</code>’ 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">‘<code
+ class=property>attributeType</code>’</a> attribute to specify the
+ namespace in which the target attribute and its associated values are
+ defined. The attribute can have the values ‘<code
+ class=property>CSS</code>’, ‘<code
+ class=property>XML</code>’ or ‘<code
+ class=property>auto</code>’, where ‘<code
+ class=property>auto</code>’ is the default value.
+
+ <p> However, in the combination with the ‘<a href="#effects"><code
+ class=property>transform</code></a>’, ‘<code
+ class=property>patternTransform</code>’ and ‘<code
+ class=property>gradientTransform</code>’ presentation attributes,
+ ‘<code class=property>attributeType</code>’ can just be used
+ to indicate the syntax rules used for the transform attribute values. A
+ value of ‘<code class=property>CSS</code>’ indicates that the
+ transform values should be parsed according to the CSS syntax. A value of
+ ‘<code class=property>XML</code>’ indicates that the transform
+ values should be parsed according to the <a href="#svg-syntax">SVG
+ ‘<code class=property>transform</code>’ syntax</a>.
+
+ <p> User agents are recommended to use the more tolerant <a
+ href="#svg-syntax">SVG ‘<code class=property>transform</code>’
+ syntax</a> for a value of ‘<code class=property>auto</code>’
+ to parse transform values.
+
+ <h4 id=svg-animateTransform-extension><span class=secno>7.8.4. </span>The
+ SVG ‘<code class=property>animateTransform</code>’ 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
+ ‘<code class=property>type</code>’ 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
<translation-value> is defined as a <length> or
<percentage> value, and the <angle> 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 <angle> is used in this specification, a <number>
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(<angle>[, <translation-value>,
- <translation-value>])</code>
+ <dt> <code class=css>rotate(<angle>)</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(<angle>[, <angle>])</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 <translation-value> values are defined as [<percentage>
@@ -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><svg>
+ <style>
+ .container {
+ transform: translate(100px, 100px);
+ }
+ </style>
+
+ <g class="container" transform="translate (200 200)">
+ <rect width="100" height="100" fill="blue" />
+ </g>
+</svg></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 '<translation-value>' and '<length>' type</h5>
+
+ <p>
+ A translation-value or length can be a '<number>' 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 '<angle>' type</h5>
+
+ <p>
+ An angle can be a '<number>' 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 '<number>' 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 <gradient> and >pattern< 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 <gradient> 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><svg>
+ <defs>
+ <pattern id="pattern-1">
+ <rect id="rect1" width="100" height="100" fill="blue" transform="rotateX(45deg)" />
+ </pattern>
+ </defs>
+
+ <use x="100" y="0" xlink:href="rect1" />
+
+ <circle cx="50" cy="50" r="50" fill="url(#pattern-1)" />
+</svg></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(<angle>[, <translation-value>, <translation-value>])</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><svg>
+ <style>
+ pattern {
+ transform: translate(50px, 50px) rotate(45deg);
+ transform-origin: 50% 50%;
+ }
+ </style>
+
+ <defs>
+ <pattern id="pattern-1">
+ <rect id="rect1" width="100" height="100" fill="blue" />
+ </pattern>
+ </defs>
+
+ <rect width="100" height="100" fill="url(#pattern-1)" />
+</svg></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><linearGradient gradientTransform="scale(2)">
+ <animate attributeName="gradientTransform" from="scale(2)" to="scale(4)"
+ dur="3s" additive="sum"/>
+ <animate attributeName="transform" from="translate(0, 0)" to="translate(100px, 100px)"
+ dur="3s" additive="sum"/>
+</linearGradient></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 <translation-value> is defined as a <length> or
<percentage> value, and the <angle> 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 <angle> is used in this specification, a <number> 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(<angle>[, <translation-value>, <translation-value>])</code>
+ <code class="css">rotate(<angle>)</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(<angle>[, <angle>])</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