- From: Dirk Schulze via cvs-syncmail <cvsmail@w3.org>
- Date: Sun, 26 Feb 2012 05:45:37 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-transforms
In directory hutz:/tmp/cvs-serv28160
Modified Files:
Overview.html Transforms.src.html ChangeLog
Log Message:
2012-02-25 dschulze@adobe.com
Cleanup SVG related texts, corrected typos.
Added description of SVG DOM changes according to resolutions of SVG WG.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Overview.html,v
retrieving revision 1.30
retrieving revision 1.31
diff -u -d -r1.30 -r1.31
--- Overview.html 24 Feb 2012 19:42:21 -0000 1.30
+++ Overview.html 26 Feb 2012 05:45:34 -0000 1.31
@@ -36,15 +36,15 @@
<h1>CSS Transforms</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 February
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 February
2012</h2>
<dl>
<dt>This version:
<dd> <a
- 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-->
+ href="http://www.w3.org/TR/2012/ED-css3-transforms-20120226/">http://dev.w3.org/csswg/css3-transforms/</a>
+ <!--http://www.w3.org/TR/2012/WD-css3-transforms-20120226-->
<dt>Latest version:
@@ -199,8 +199,8 @@
</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>
+ <li><a href="#svg-syntax"><span class=secno>7.2. </span>Syntax of the
+ SVG ‘<code class=property>transform</code>’ attribute</a>
<ul class=toc>
<li><a href="#svg-transform-list"><span class=secno>7.2.1.
</span>Transform List</a>
@@ -229,18 +229,18 @@
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.
+ <li><a href="#svg-transformation-functions"><span class=secno>7.4.
</span>SVG transformation functions</a>
+ <li><a href="#svg-three-dimensional-functions"><span class=secno>7.5.
+ </span>SVG and 3D 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>
+ DOM interface for the ‘<code
+ class=property>transform</code>’ attribute</a>
<li><a href="#svg-animation"><span class=secno>7.8. </span>SVG
Animation</a>
@@ -974,17 +974,15 @@
one that applies to transformable elements in the SVG namespace.
<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.
+ <a href="#transform-origin"><code
+ class=property>'transform-origin'</code></a>, <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> in the SVG namespace. All
+ new introduced presentation attributes are animateable.
<h3 id=transform-attribute-specificity><span class=secno>7.1. </span>SVG
‘<a href="#effects"><code class=property>transform</code></a>’
@@ -997,10 +995,10 @@
in the SVG specification.
<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> 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>
<pre><svg>
<style>
@@ -1017,15 +1015,15 @@
<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
+ <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
+ <h3 id=svg-syntax><span class=secno>7.2. </span>Syntax of the SVG ‘<a
href="#effects"><code class=property>transform</code></a>’ attribute</h3>
<p> To provide backward compatibility, the syntax of the ‘<a
@@ -1049,12 +1047,12 @@
<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
+ transform list with zero or more transform 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.
+ list consists of more than one transform 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>
@@ -1069,9 +1067,8 @@
<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
+ <p> Arguments of transform 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:
@@ -1114,88 +1111,18 @@
<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>
+ properties. Instead the style can be set by the <a href="#effects"><code
+ class=property>'transform'</code></a> style property.
- <h3 id=svg-transformation-functions><span class=secno>7.5. </span>SVG
+ <h3 id=svg-transformation-functions><span class=secno>7.4. </span>SVG
transformation functions</h3>
<p> For backward compatibility to existing SVG content, this specification
- must support all transformation functions defined by <a
+ must support all transform 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:
+ 1.1. Therefore the two-dimensional transform function <code
+ class=css>rotate(<angle>)</code> gets extended as follows:
<dl>
<dt> <code class=css>rotate(<angle>[, <translation-value>,
@@ -1215,6 +1142,45 @@
<p> User agents are just required to support the two optional arguments for
translation on elements in the SVG namespace.
+ <h3 id=svg-three-dimensional-functions><span class=secno>7.5. </span>SVG
+ and 3D transformation functions</h3>
+
+ <p> This specification explicitly allows to apply three-dimensional
+ transform functions to the <a
+ href="http://www.w3.org/TR/SVG/intro.html#TermContainerElement">container
+ elements</a>: ‘<code class=property>a</code>’, ‘<code
+ class=property>g</code>’, ‘<code
+ class=property>svg</code>’, all <a
+ href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics
+ elements</a>, all <a
+ href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsReferencingElement">graphics
+ referencing elements</a> and the SVG <a
+ href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement">‘<code
+ class=property>foreignObject</code>’</a> element.
+
+ <p> Three-dimensional transform functions and the properties <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> can not be used for the
+ elements: ‘<code class=property>clipPath</code>’, ‘<code
+ class=property>mask</code>’, ‘<code
+ class=property>linearGradient</code>’, ‘<code
+ class=property>radialGradient</code>’ and ‘<code
+ class=property>pattern</code>’. If a transform list includes a
+ three-dimensional transform function, the complete transform list must be
+ ignored. The values of every previously named property must be ignored.
+ Transformable elements that are contained by one of these elements can
+ have three-dimensional transform functions. Before a ‘<code
+ class=property>clipPath</code>’, ‘<code
+ class=property>mask</code>’ or ‘<code
+ class=property>pattern</code>’ element can get applied to a target
+ element, user agents must take the drawn results as static images in
+ analogue of "flattening" the elements and taking the rendered content as a
+ two-dimensional canvas.
+
<h3 id=svg-object-bounding-box><span class=secno>7.6. </span>Object
bounding box units</h3>
@@ -1230,8 +1196,8 @@
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.
+ zero. Percentage values or keywords won't affect the rendering and are
+ treated as if zero was specified.
<div class=example>
<p> The ‘<a href="#transform-origin"><code
@@ -1260,35 +1226,60 @@
<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>
+ <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>
+ <h3 id=transform-attribute-dom><span class=secno>7.7. </span>SVG DOM
+ interface for the ‘<a href="#effects"><code
+ class=property>transform</code></a>’ attribute</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 ‘<a href="#effects"><code
- class=property>transform</code></a>’ 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> The SVG specification defines the <a
+ href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a>
+ interface in SVG DOM to access the animated and the base value of the SVG
+ transform attribute. To ensure backwards compatibility, this API must
+ still be supported by user agents.
- <div class=issue>
- <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>
+ <p> The <a href="#effects"><code class=property>'transform'</code></a>
+ property contributes to the CSS cascade. According to SVG 1.1 user agents
+ conceptually insert a <a
+ href="http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes">new
+ author style sheet</a> for presentation attributes, which is the first in
+ the author style sheet collection. <code>baseVal</code> gives the author
+ the possibility to access and modify the values of the SVG ‘<a
+ href="#effects"><code class=property>transform</code></a>’
+ attribute. To provide the necessary backward compatibility to SVG DOM,
+ <code>baseVal</code> must reflect the values of this author style sheet.
+ All modifications to SVG DOM objects of <code>baseVal</code> must affect
+ this author style sheet immediately.
+
+ <p> <code>animVal</code> represents the computed style of the <a
+ href="#effects"><code class=property>'transform'</code></a> property.
+ Therefore it includes all applied <a
+ href="http://www.w3.org/TR/css3-transitions/">CSS3 Transitions</a>, <a
+ href="http://www.w3.org/TR/css3-animations/">CSS3 Animations</a> or <a
+ href="#svg-animation">SVG Animations</a> if any of those are underway. The
+ computed style and SVG DOM objects of <code>animVal</code> can not be
+ modified.
+
+ <p> The attribute <a
+ href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__type">‘<code
+ class=property>type</code>’</a> of <a
+ href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform">SVGTransform</a>
+ must return <a
+ href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__SVG_TRANSFORM_UNKNOWN">
+ <code>SVG_TRANSFORM_UNKNOWN</code></a> for <a
+ href="#transformation-functions">Transformation Functions</a> or unit
+ types that are not supported by this interface. It might still be possible
+ to get the <a
+ href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a>
+ by the attribute <a
+ href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__matrix">‘<code
+ class=property>matrix</code>’</a>.
<h3 id=svg-animation><span class=secno>7.8. </span>SVG Animation</h3>
@@ -1298,14 +1289,16 @@
<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
+ for the SVG <a
+ href="http://www.w3.org/TR/SVG/animate.html#AnimateElement">‘<code
+ class=property>animate</code>’</a> element or the SVG <a
+ href="http://www.w3.org/TR/SVG/animate.html#SetElement">‘<code
+ class=property>set</code>’</a> 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>.
@@ -1356,11 +1349,9 @@
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.
+ defined. The attribute can have the values <code>CSS</code>,
+ <code>XML</code> or <code>auto</code>, where <code>auto</code> is the
+ default value.
<p> However, in the combination with the ‘<a href="#effects"><code
class=property>transform</code></a>’, ‘<code
@@ -1368,28 +1359,27 @@
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>.
+ value of <code>CSS</code> indicates that the transform values should be
+ parsed according to the CSS syntax. A value of <code>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.
+ syntax</a> for a value of <code>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
+ <p> This specification introduces new transform 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
+ Animation</a>. The SVG <a
+ href="http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement">‘<code
+ class=property>type</code>’</a> attribute gets extended by all
+ transform 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>
<!-- ======================================================================================================= -->
@@ -2225,7 +2215,7 @@
<p> After interpolation the resulting values are used to position the
element. One way to use these values is to recompose them into a 4x4
- matrix. This can be done using the Transformation Functions of the <a
+ matrix. This can be done using the transform functions of the <a
href="#effects"><em>transform</em></a> property. This can be done by the
following pseudo code. The values passed in are the output of the Unmatrix
function above:
@@ -2242,7 +2232,7 @@
<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
+ <p> Mathematically, all transform functions can be represented as 4x4
transformation matrices of the following form:
<p><img
Index: Transforms.src.html
===================================================================
RCS file: /sources/public/csswg/css3-transforms/Transforms.src.html,v
retrieving revision 1.33
retrieving revision 1.34
diff -u -d -r1.33 -r1.34
--- Transforms.src.html 24 Feb 2012 19:42:21 -0000 1.33
+++ Transforms.src.html 26 Feb 2012 05:45:35 -0000 1.34
@@ -678,9 +678,9 @@
</p>
<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>
+ This specification will also introduce the new presentation attributes <code class="property">'transform-origin'</code>,
+ <code class="property">'perspective'</code>, <code class="property">'perspective-origin'</code>,
+ <code class="property">'transform-style'</code> and <code class="property">'backface-visibility'</code>
in the SVG namespace. All new introduced presentation attributes are animateable.
</p>
@@ -694,7 +694,7 @@
<div class="example">
<p>
- This example shows the combination of the 'transform' style property and the 'transform' presentation attribute.
+ This example shows the combination of the <code class="property">'transform'</code> style property and the 'transform' presentation attribute.
</p>
<pre><svg>
@@ -714,12 +714,12 @@
</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.
+ Because of the participation to the CSS cascade, the <code class="property">'transform'</code> style property overrides the
+ 'transform' presentation attribute. Therefore the container gets translated by 100px in horizontal and vertical direction, instead of 200px.
</p>
</div>
- <h3 id="svg-syntax">Syntax for SVG 'transform' attribute</h3>
+ <h3 id="svg-syntax">Syntax of the SVG 'transform' attribute</h3>
<p>
To provide backward compatibility, the syntax of the 'transform' presentation attribute differs from
@@ -735,9 +735,9 @@
<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
+ The value for the 'transform' attribute consists of a transform list with zero or more transform 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
+ transform 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>
@@ -755,7 +755,7 @@
<h4 id="svg-data-types">SVG Data Types</h4>
<p>
- Arguments of transformation functions consists of data types in the sense of
+ Arguments of transform 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>
@@ -789,66 +789,15 @@
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.
+ style can be set by the <code class="property">'transform'</code> style property.
</p>
-
- <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: '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
+ For backward compatibility to existing SVG content, this specification must support all transform 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:
+ Therefore the two-dimensional transform function <code class="css">rotate(<angle>)</code> gets extended as follows:
</p>
<dl>
@@ -867,6 +816,27 @@
<p>
User agents are just required to support the two optional arguments for translation on elements in the SVG namespace.
</p>
+
+ <h3 id="svg-three-dimensional-functions">SVG and 3D transformation functions</h3>
+
+ <p>
+ This specification explicitly allows to apply three-dimensional transform functions to the
+ <a href="http://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>:
+ 'a', 'g', 'svg', all <a href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a>, all
+ <a href="http://www.w3.org/TR/SVG/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>
+ and the SVG <a href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement">'foreignObject'</a> element.
+ </p>
+
+ <p>
+ Three-dimensional transform functions and the properties <code class="property">'perspective'</code>,
+ <code class="property">'perspective-origin'</code>, <code class="property">'transform-style'</code>
+ and <code class="property">'backface-visibility'</code> can not be used for the elements: 'clipPath', 'mask', 'linearGradient',
+ 'radialGradient' and 'pattern'. If a transform list includes a three-dimensional transform function, the complete
+ transform list must be ignored. The values of every previously named property must be ignored.
+ Transformable elements that are contained by one of these elements can have three-dimensional transform functions.
+ Before a 'clipPath', 'mask' or 'pattern' element can get applied to a target element, user agents must take the drawn results as static
+ images in analogue of "flattening" the elements and taking the rendered content as a two-dimensional canvas.
+ </p>
<h3 id="svg-object-bounding-box">Object bounding box units</h3>
@@ -880,7 +850,7 @@
<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.
+ rendering and are treated as if zero was specified.
</p>
<div class="example">
@@ -907,35 +877,56 @@
</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
+ A SVG 'pattern' element doesn't have an object bounding box. Therefore the relative values of the
+ <code class="property">'transform-origin'</code> property don't affect the rendering and are treated
+ as if zero was specified. The translation on the <code class="property">'transform'</code> 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>
+ <h3 id="transform-attribute-dom">SVG DOM interface for the 'transform' attribute</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.
+ The SVG specification defines the
+ <a href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a>
+ interface in SVG DOM to access the animated and the base value of the SVG transform attribute. To ensure backwards compatibility,
+ this API must still be supported by user agents.
</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>
+ <p>
+ The <code class="property">'transform'</code> property contributes to the CSS cascade. According to SVG 1.1 user agents conceptually insert a
+ <a href="http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes">new author
+ style sheet</a> for presentation attributes, which is the first in the author style sheet collection.
+ <code>baseVal</code> gives the author the possibility to access and modify the values of the SVG 'transform' attribute.
+ To provide the necessary backward compatibility to SVG DOM, <code>baseVal</code> must reflect the values of this author style sheet.
+ All modifications to SVG DOM objects of <code>baseVal</code> must affect this author style sheet immediately.
+ </p>
+
+ <p>
+ <code>animVal</code> represents the computed style of the <code class="property">'transform'</code> property. Therefore it includes all applied
+ <a href="http://www.w3.org/TR/css3-transitions/">CSS3 Transitions</a>, <a href="http://www.w3.org/TR/css3-animations/">CSS3
+ Animations</a> or <a href="#svg-animation">SVG Animations</a> if any of those are underway. The computed style and SVG DOM
+ objects of <code>animVal</code> can not be modified.
+ </p>
+
+ <p>
+ The attribute <a href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__type">'type'</a> of
+ <a href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGTransform">SVGTransform</a>
+ must return <a href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__SVG_TRANSFORM_UNKNOWN">
+ <code>SVG_TRANSFORM_UNKNOWN</code></a> for <a href="#transformation-functions">Transformation Functions</a> or unit types that
+ are not supported by this interface. It might still be possible to get the
+ <a href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVGMatrix</a> by the attribute
+ <a href="http://www.w3.org/TR/SVG/coords.html#__svg__SVGTransform__matrix">'matrix'</a>.
+ </p>
<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.
+ The SVG 1.1 specification did not define animations of the 'transform' attribute for the SVG
+ <a href="http://www.w3.org/TR/SVG/animate.html#AnimateElement">'animate'</a> element or the SVG
+ <a href="http://www.w3.org/TR/SVG/animate.html#SetElement">'set'</a> 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>.
@@ -970,27 +961,27 @@
<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.
+ namespace in which the target attribute and its associated values are defined. The attribute can have the values <code>CSS</code>, <code>XML</code> or
+ <code>auto</code>, where <code>auto</code> 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
+ can just be used to indicate the syntax rules used for the transform attribute values. A value of <code>CSS</code> indicates that the transform values should
+ be parsed according to the CSS syntax. A value of <code>XML</code> 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.
+ User agents are recommended to use the more tolerant <a href="#svg-syntax">SVG 'transform' syntax</a> for a value of <code>auto</code> 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>,
+ This specification introduces new transform functions that are not supported by <a href="http://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a>. The
+ SVG <a href="http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement">'type'</a> attribute gets extended by all
+ transform 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>
@@ -1954,7 +1945,7 @@
<p><em>This section is not normative.</em></p>
<p>
After interpolation the resulting values are used to position the element. One way to use these values
- is to recompose them into a 4x4 matrix. This can be done using the Transformation Functions of the
+ is to recompose them into a 4x4 matrix. This can be done using the transform functions of the
<em>transform</em> property. This can be done by the following pseudo code. The
values passed in are the output of the Unmatrix function above:
</p>
@@ -1971,7 +1962,7 @@
Mathematical Description of Transformation Functions
</h2>
<p>
- Mathematically, all transformation functions can be represented as 4x4 transformation matrices of the following form:
+ Mathematically, all transform functions can be represented as 4x4 transformation matrices of the following form:
</p>
<img src="4x4matrix.png" alt="\begin{bmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{bmatrix}" width="222" height="106">
Index: ChangeLog
===================================================================
RCS file: /sources/public/csswg/css3-transforms/ChangeLog,v
retrieving revision 1.20
retrieving revision 1.21
diff -u -d -r1.20 -r1.21
--- ChangeLog 24 Feb 2012 19:42:21 -0000 1.20
+++ ChangeLog 26 Feb 2012 05:45:35 -0000 1.21
@@ -1,3 +1,7 @@
+2012-02-25 dschulze@adobe.com
+ Cleanup SVG related texts, corrected typos.
+ Added description of SVG DOM changes according to resolutions of SVG WG.
+
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.
Received on Sunday, 26 February 2012 05:45:40 UTC