Copyright © 2004 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
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.
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.
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:
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
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:
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:
Simple transformations are represented in matrix form as follows:
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:
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.
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'
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 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.
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.
The following interfaces are defined below: RandomInterface.
The RandomInterface interface corresponds to the 'RandomInterface' element.
interface RandomInterface : SVGElement {
readonly attribute InterfaceString foo;
};
The editors would like to acknowledge and thank the following people for substantive aid with this specification: .