FX 2D Transforms 1.0, Part 2: Language

W3C Editor's Draft

This version:
Latest version:
[Editor Name], [Organization Name] <[editor@example.com]>
The authors of this specification are the participants of the W3C SVG Working Group.


Although originally designed for use in CSS and SVG, some aspects of this specification could be used in other environments, such as HTML styled with and XSL:FO.

This document defines the markup used by FX 2D Transforms.

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C.

This document has been produced by the W3C FX Taskforce as part of the W3C Style Activity and Graphics Activity within the Interaction Domain.

We explicitly invite comments on this specification. Please send them to public-fx@w3.org (archives), the public email list for issues related to vector graphics on the Web. Acceptance of the archiving policy is requested automatically upon first post to either list. To subscribe to this list, please send an email to public-fx-request@w3.org with the word subscribe in the subject line.

The latest information regarding CSS patent disclosures and SVG patent disclosures to this document is available on the Web. As of this publication, the FX Taskforce are not aware of any royalty-bearing patents they believe to be essential to 2D Transforms.

Publication of this document does not imply endorsement by the W3C membership. A list of current W3C Recommendations and other technical documents can be found at http://www.w3.org/TR/. W3C publications may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to cite a W3C Working Draft as anything other than a work in progress.

How to read this document and give feedback

This draft of XF 2D Transforms encapsulates the syntax and markup for the CSS 2D Transforms and SVG 2D Transforms languages. One of the goals is that this specification is to provide common behaviour and a common interface for both the CSS and SVG languages. Additionally, the specification can be re-used more easily by other specifications that want to have advanced 2D features. This specification introduces syntax that may not be backwards compatible with older SVG User Agents, and the use of this syntax should be accompanied by a fallback using the 'switch' element.

What should happen with CSS regarding backwards compatibility? Is that even an issue given this is the first transforms spec applicable to CSS?

The main purpose of this document is to encourage public feedback. The best way to give feedback is by sending an email to public-fx@w3.org. Please include some kind of keyword that identifies the area of the specification the comment is referring to in the subject line of your message (e.g "Section X.Y - Foo attribute values" or "2D Transforms Functionality"). If you have comments on multiple areas of this document, then it is probably best to split those comments into multiple messages.

The public are welcome to comment on any aspect in this document, but there are a few areas in which the FX Taskforce are explicitly requesting feedback. These areas are noted in place within this document. There is also a specific area related to the specification that is listed here:


  1. 1. Introduction
  2. 2. Coordinate system transformations
  3. 3. Nested transformations
  4. 4. The transform effect
  5. 5. The transform-origin effect
  6. 6. The Transformation Functions
  7. 5. Acknowledgments


The XF Taskforce will need to figure out how to merge the CSS 2D Transforms indroduction section and the SVG Transforms sections 7.1, 7.2, 7.3

Coordinate system transformations

A new user space (i.e., a new current coordinate system) can be established by specifying a Transform Function<span class="SVG-Term">transformations</span> in the form of a using either the 'transform' property (CSS) or the 'transform' attribute (SVG) on a container element or graphics element or a 'viewBox' attribute on an 'svg', 'symbol', 'marker element', 'pattern' and the 'view' element elements defined by the host language. The 'transform' and 'viewBox' property (CSS) and attributes (SVG) transform user space coordinates and lengths on sibling attributes on the given element (see effect of the 'transform' attribute on sibling attributes and effect of the 'viewBox' attribute on sibling attributes) and all of its descendants. Transformations can be nested, in which case the effect of the transformations are cumulative.

Mathematically, all transformations can be represented as 3x3 transformation matrices of the following form:
      3-by-3 transformation matrix

Since only six values are used in the above 3x3 matrix, a transformation matrix is also expressed as a vector: [a b c d e f].

Transformations map coordinates and lengths from a new coordinate system into a previous coordinate system:
      3-by-3 transformation matrix

Simple transformations are represented in matrix form as follows:

Nested transformations

Transformations can be nested to any level. The effect of nested transformations is to post-multiply (i.e., concatenate) the subsequent transformation matrices onto previously defined transformations:
      3-by-3 matrix concatenation

For each given element, the accumulation of all transformations that have been defined on the given element and all of its ancestors up to and including the element that established the current viewport (usually, the 'svg' element which is the most immediate ancestor to the given element) is called the current transformation matrix or CTM. The CTM thus represents the mapping of current user coordinates to viewport coordinates: Specifying a value other than 'none' for the 'transform' property establishes a new local coordinate system at the element that it is applied to. Transformations are cumulative. That is, elements establish their local coordinate system within the coordinate system of their parent. In this way, a 'transform' property/attribute effectively accumulates all the 'transform' properties/attributes of its ancestors. The accumulation of these transforms defines a current transformation matrix (CTM) for the element.
current transformation matrix: CTM

The 'transform' effect

Need to add something similar to this somewhere: the 'transform' key word it as any of the other CSS properties that SVG share with HTML/CSS (e.g 'display'), basically same as overriding the attribute Advantage(s): mostly consistent with the model (possibly with the exception of 'none') Notes: What 'transform: none' means in css2d transforms isn't clearly defined, for svg it would have to mean that the attribute is used, otherwise backwards compatibility is lost. Should there be an 'auto' initial value to deal with these cases?

A two-dimensional transformation is applied to an element through the 'transform' property effect. This property effect contains a list of transform functions. The final transformation value for an element is obtained by performing a matrix concatenation of each entry in the list. The set of transform functions is similar to those allowed by SVG.

Name: transform
Value: none | <transform-function> [ <transform-function> ]*
Initial: none
Applies to CSS: block-level and inline-level elements
Applies to SVG: container or graphics elements
Inherited: no
Percentages: refer to the size of the element's box
Media: visual
Computed value: Same as specified value.

The 'transform-origin' effect

The 'transform-origin' property effect establishes the origin of transformation for an element. This property effect is applied by first translating the element by the negated value of the property effect, then applying the element's transform, then translating by the property effect value. This effectively moves the desired transformation origin of the element to (0,0) in the local coordinate system, then applies the element's transform, then moves the element back to its original position.

If only one value is specified, the second value is assumed to be 'center'. If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. Negative <percentage> and <length> values are allowed.

Name: transform-origin
Value: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]
Initial: 50% 50%
Applies to CSS: block-level and inline-level elements
Applies to SVG: container or graphics elements
Inherited: no
Percentages: refer to the size of the element's box
Media: visual
Computed value: For <length> the absolute value, otherwise a percentage

The Transformation Functions

The value of the transform property effect is a list of <transform-functions> applied in the order provided. The individual transform functions are separated by whitespace. The 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.

matrix(<number>, <number>, <number>, <number>, <number>, <number>)
specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].
translate(<translation-value>[, <translation-value>])
specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.
specifies a translation by the given amount in the X direction.
specifies a translation by the given amount in the Y direction.
scale(<number>[, <number>])
specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.
specifies a skew transformation along the X axis by the given angle.
specifies a skew transformation along the Y axis by the given angle.
skew(<angle> [, <angle>])
specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie. no skew on the Y axis).

RelaxNG Schema for FX 2D Transforms 1.0

The schema for FX 2D Transforms 1.0 is written in RelaxNG [RelaxNG], a namespace-aware schema language that uses the datatypes from XML Schema Part 2 [Schema2]. This allows namespaces and modularity to be much more naturally expressed than using DTD syntax. The RelaxNG schema for SVG Filter 1.2 may be imported by other RelaxNG schemas, or combined with other schemas in other languages into a multi-namespace, multi-grammar schema using Namespace-based Validation Dispatching Language [NVDL].

Unlike a DTD, the schema used for validation is not hardcoded into the document instance. There is no equivalent to the DOCTYPE declaration. Simply point your editor or other validation tool to the IRI of the schema (or your local cached copy, as you prefer).

The RNG is under construction, and only the individual RNG snippets are available at this time. They have not yet been integrated into a functional schema. The individual RNG files are available here.

DOM interfaces

The interfaces below will be made available in a IDL file for an upcoming draft.

The following interfaces are defined below: RandomInterface.

Interface RandomInterface

The RandomInterface interface corresponds to the 'RandomInterface' element.

IDL Definition
interface RandomInterface : SVGElement { 
    readonly attribute InterfaceString foo;

readonly InterfaceString foo
Corresponds to attribute bar on the given 'Random' element.


Normative References

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, B. Bos, T. Çelik, I. Hickson, H. Wium Lie, eds. World Wide Web Consortium, 8 September 2009.
This edition of CSS 2.1 is http://www.w3.org/TR/2009/CR-CSS2-20090908/
The latest edition of SVG CSS 2.1 is available at http://www.w3.org/TR/CSS21/.
Key words for use in RFCs to Indicate Requirement Levels, S. Bradner, March 1997.
Available at http://tools.ietf.org/html/rfc2119.
Scalable Vector Graphics (SVG) 1.1, J. Ferraiolo, 藤沢 淳 (Fujisawa Jun), D. Jackson, eds. World Wide Web Consortium, 14 January 2003.
This edition of SVG 1.1 is http://www.w3.org/TR/2003/REC-SVG11-20030114/.
The latest edition of SVG 1.1 is available at http://www.w3.org/TR/SVG11/.
Scalable Vector Graphics (SVG) Tiny 1.2, O. Andersson, R. Berjon, E. Dahlström, A. Emmons, J. Ferraiolo, A. Grasso, V. Hardy, S. Hayman, D. Jackson, C. Lilley, C. McCormack, A. Neumann, C. Northway, A. Quint, N. Ramani, D. Schepers, A. Shellshear, eds. World Wide Web Consortium, 22 December 2008.
This edition of SVG Tiny 1.2 is http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/.
The latest edition of SVG Tiny 1.2 is available at http://www.w3.org/TR/SVGTiny12/.

Informative References

Information Technology — Document Schema Definition Languages (DSDL) — Part 4: Namespace-based Validation Dispatching Language: ISO/IEC FDIS 19757-4:2005(E), International Organization for Standardization, December 2005.
Available at http://www.jtc1sc34.org/repository/0694.pdf.
XML Schema Part 2: Datatypes Second Edition. P. Biron, A. Malhotra, eds. World Wide Web Consortium, 28 October 2004. (See also Processing XML 1.1 documents with XML Schema 1.0 processors [XML11-SCHEMA].)
This edition of XML Schema Part 2 is http://www.w3.org/TR/2004/REC-xmlschema-2-20041028/.
The latest edition of XML Schema Part 2 is available at http://www.w3.org/TR/xmlschema-2/.


The editors would like to acknowledge and thank the following people for substantive aid with this specification: .