diff --git a/css3-transforms/Transforms.src.html b/css3-transforms/Transforms.src.html --- a/css3-transforms/Transforms.src.html +++ b/css3-transforms/Transforms.src.html @@ -759,17 +759,17 @@ div {

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 both the horizontal and the vertical directions, instead of '200px'.

-

Syntax of the SVG 'transform' attribute

+

Syntax of the SVG 'transform' attribute

To provide backwards compatibility, the syntax of the 'transform' presentation attribute differs from the syntax of the 'transform' style property as 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 '(', @@ -977,17 +977,17 @@ div { 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. + the value 'transform'. The same 'transform' property will get animated.

In this example the gradient transformation of the linear gradient gets animated.

<linearGradient gradientTransform="scale(2)">
@@ -997,44 +997,35 @@ div {
           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 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. -

-

The SVG 'animateTransform' element

This specification introduces new transform functions that are not supported by SVG 1.1 Animation. The SVG 'type' attribute gets extended by all transform functions listed in 2D Transformation Functions, 3D Transformation Functions and SVG Transformation Functions.

+ +

+ The attributes 'from', 'by' and 'to' of the 'animateTransform' element take the argument(s) to the functional notation and follow the + syntax of the SVG 'transform' attribute. +

+ +

+ The ‘values’ attribute of the ‘animateTransform’ element consists of a semicolon-separated list of values, where each individual value is expressed as described + above for ‘from’, ‘by’ and ‘to’ attributes. +

The 'transform-origin' Property