--- /Users/dschulze/Desktop/source.html 2012-02-21 21:26:03.000000000 -0800
+++ Transforms.src.html 2012-02-21 21:26:33.000000000 -0800
@@ -1,4 +1,4 @@
-
+
@@ -499,7 +499,7 @@
Should intersection behavior be normative?
- Elements in the same 3D rendering context may intersect with eachother. User agents should
+ Elements in the same 3D rendering context may intersect with each other. User agents should
subdivide the planes of intersecting elements as described by
Newell's algorithm to render intersection.
@@ -657,40 +657,335 @@
-
+
- The SVG 1.1 specification did not
- specify the 'transform' attribute as a presentation attribute.
- 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.
-
-
+
+ The SVG 1.1 specification did not
+ specify the attributes 'transform', 'gradientTransform' or 'patternTransform' as
+ presentation attributes.
+ 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.
+
+
+
+ This specification will also introduce the new presentation attributes 'transform-origin',
+ 'perspective', 'perspective-origin',
+ 'transform-style' and 'backface-visibility'
+ in the SVG namespace. All new introduced presentation attributes are animateable.
+
+
+
- Since the SVG attribute becomes a presentation attribute, its participation to the CSS
+
Since the previously named SVG attributes become presentation attributes, their participation to the CSS
cascade is determined by the specificity of presentation attributes, as
explained
- in the SVG specification.
-
-
+ in the SVG specification.
+
+
+
+
+ This example shows the combination of the 'transform' style property and the 'transform' presentation attribute.
+
+
+
<svg>
+ <style>
+ .container {
+ transform: translate(100px, 100px);
+ }
+ </style>
+
+ <g class="container" transform="translate (200 200)">
+ <rect width="100" height="100" fill="blue" />
+ </g>
+</svg>
+
+
+
+
+ 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.
+
+
The SVG specification defines 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 baseVal should be the value of the 'transform' attribute,
- as set on the element, and the animVal should be the property's computed value which account
- for CSS animation, if any is underway.
-
+ Syntax for SVG 'transform' attribute
+
+
+ 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 CSS Values and Units Module.
+ Therefore an author should write transform="translate(200px, 200px)" instead of
+ transform="translate (200 200)" 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.
+
+
+
+
+
+ The values for the 'transform' attribute consists of a transform list with zero or more transformation functions
+ in the functional notation. 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.
+
+
+ Functional Notations
+
+
+ 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.
+
+
+ SVG Data Types
+
+
+ Arguments of transformation functions consists of data types in the sense of
+ CSS Values and Units Module. The definitions of
+ data types in CSS Values and Units Module gets enhanced as follows:
+
+
+
+
+
+ A translation-value or length can be a '<number>' without an unit identifier. In this case
+ the number gets interpreted as "user unit". A user unit in the the
+ initial
+ coordinate system is equivalenced to the parent environment's notion of a px unit.
+
+
+ The '<angle>' type
+
+
+ An angle can be a '<number>' without an unit identifier. In this case the number
+ gets interpreted as a value in degrees.
+
+
+ The '<number>' type
+
+
+ SVG supports scientific notations for numbers. Therefore a number gets parsed like described in SVG
+ Basic data types for SVG attributes.
+
+
+
+
+
+ SVG specifies the attributes 'gradientTransform' and 'patternTransform'. This specification
+ makes both attributes to presentation attributes. Both attributes use the same syntax as
+ the SVG 'transform' attribute. This specification won't introduce corresponding CSS style properties. Instead the
+ style can be set by the 'transform' style property.
+
+
+ SVG 'transform' attribute and 3D transformation functions
+
+
+ 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.
+
+
-
- - 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.)
- - Is this proposal working for SMIL animation of the transform property?
-
+
+ Either allow 3D transformation functions on children of patterns, mask and others and explain how to flatten the results, or use
+ the following wording:
+
+
+
+ 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.
+
+
+
+
+ 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'.
+
+
+
<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>
+
+
+ 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.
+
+
+
+
+ For backward compatibility to existing SVG content, this specification must support all transformation functions
+ defined by The 'transform' attribute in SVG 1.1.
+ Therefore the two-dimensional transformation function 'rotate'
+ gets extended as follows:
+
+
+
+ -
+
rotate(<angle>[, <translation-value>, <translation-value>])
+
+ -
+ specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined
+ by the transform-origin 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.
+
+
+
+
+ User agents are just required to support the two optional arguments for translation on elements in the SVG namespace.
+
+
+ Object bounding box units
+
+
+ Percentage or fractional values in SVG are either relative to the elements viewport units or to the elements
+ object bounding box units 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.
+
+
+
+ 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.
+
+
+
+
+ The 'transform-origin' property on the pattern in the following example specifies a 50% translation of the origin in each dimension.
+ The 'transform' property also specifies a translation, but in absolute lengths.
+
+
+
<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>
+
+
+ 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.
+
+
+ The SVG specification defines
+ 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 baseVal should be the value of the 'transform' attribute,
+ as set on the element, and the animVal should be the property's computed value which account for CSS animation, if
+ any is underway.
+
+
+
+
+ The SVG WG as well as the FX task force solved issues with 'baseVal' and 'animVal'. This section needs to address the resolutions.
+
SVG Animation
+
+
+ The SVG 'animate' and 'set' element
+
+
+ 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
+ Transitions and Animations between Transform Values.
+
+
+ The SVG 'attributeName' attribute
+
+
+ SVG 1.1 Animation defines the 'attributeName' 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.
+
+
+
+
+ In this example the gradient transformation of the linear gradient gets animated.
+
+
+
<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>
+
+
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.
+
The SVG 'attributeType' attribute
+
+
+ SVG 1.1 Animation defines the 'attributeType' 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.
+
+
+
+ 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
+ SVG 'transform' syntax.
+
+
+
+ User agents are recommended to use the more tolerant SVG 'transform' syntax for a value of 'auto' to parse transform values.
+
+
+
+
+
+ This specification introduces new transformation functions that are not supported by SVG 1.1 Animation. The
+ SVG 'type' attribute gets extended by all
+ transformation functions listed in 2D Transformation Functions,
+ 3D Transformation Functions and SVG
+ Transformation Functions.
+
@@ -1201,7 +1496,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 CSS Values and Units.
+ href="http://www.w3.org/TR/css3-values/">CSS Values and Units Module.
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.
@@ -1252,11 +1547,12 @@
specifies a 2D scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
- rotate(<angle>[, <translation-value>, <translation-value>])
+ rotate(<angle>)
- specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin 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 2D rotation by the angle specified in the parameter about the origin of the element, as
+ defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter
+ of a turn in the clockwise direction.
skew(<angle>[, <angle>])
+