Copyright © 2004 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
This working draft defines features of the Scalable Vector Graphics (SVG) Language that are specifically for display environments.
This document defines the markup used by SVG Transformations. SVG Transformations gives users the ability to transform object such that they have 3D appearance.
Although originally designed for use in SVG, some aspects of this specification are defined in XML and are accessed via presentation properties, and therefore could be used in other environments, such as HTML styled with CSS and XSL:FO.
This document defines the markup used by SVG Transformations.
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 is the first public working draft of this specification. There is an accompanying SVG Template 1.0, Part 1: Primer that lists the ways SVG Template may be used.
This document has been produced by the W3C SVG Working Group as part of the W3C Graphics Activity within the Interaction Domain.
We explicitly invite comments on this specification. Please send them to www-svg@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 www-svg-request@w3.org with the word subscribe in the subject line.
The latest information regarding patent disclosures related to this document is available on the Web. As of this publication, the SVG Working Group are not aware of any royalty-bearing patents they believe to be essential to SVG.
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 working draft of SVG Transformations introduces new Transformations syntax and markup for the SVG language. One of the goals is that this specification can be re-used more easily by other specifications that want to have advanced Transformations 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.
The main purpose of this document is to encourage public feedback. The best way to give feedback is by sending an email to www-svg@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 "Transformations 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 SVG Working Group are explicitly requesting feedback. These areas are noted in place within this documentlike this. There is also a specific area related to the specification that is listed here:
This document lists features that may be used in the context of display. The various scenarios are listed in the SVG Transformations Requirements document.
Note that even though this specification references parts of SVG Tiny 1.2 it does not require a complete or SVG Tiny 1.2 implementation.
This document is normative.
This document contains explicit conformance criteria that overlap with some RNG definitions in requirements. If there is any conflict between the two, the explicit conformance criteria are the definitive reference.
The perspective-point property specifies the components for a Projection Matrix.
The porojection matrix provides a means for depth information of an element to be specified. Depth information when x=y=0 can be represented as a 4x4 matrix of the following form:
The matrix when x and y are not 0 is as follows:
The projection transformation matrix is also expressed as a vector [x y z].
All graphics are porjected on to the 2D plane.
The 3D transformation matrices provide a means to transform a point in 3D space before it is projected to a 2D plane. Mathematically, all 3D transformations can be represted as a 3x4 transformation matrices. The 3D transformation matrix extends the transformation matrix of the host language to a 3x4 matrix. For SVG, the matrix is extended from a 3x3 to a 3x4 matrix.
Points are transformed in 3D by multiplying the Projection Matrix with the Transformation Matrix then multiplying the resultant matrix by the 2D point.
The 3D transformations matrices are of the following form:
The 3D transformation matrix is also expressed as a vector [a b c d e f g h i j k l ].
The CSS Transformations specification uses 16 values. Are all 16 values really used? Can the specification get away with using the current 12 values instead?
Need to add matrix definitions for other 3D transformations below.
A 3D Translation is equivalent to the matrix:
A 3D Scaling is equivalent to the matrix:
A 3D Rotation is equivalent to the matrix:
A 3D Rotation about the X axis is equivalent to the matrix:
A 3D Rotation about the Y axis is equivalent to the matrix:
A 3D Rotation about the Z axis is equivalent to the matrix:
A 3D Skew along the X and Y axis is equivalent to the matrix:
The 'transform-origin' property establishes the transformation origin of an element in the element's CTM .
| Value: | <list-of-numbers> | [left | center | right] [top | center | bottom] <number> |
| Initial: | center center 0 |
| Applies to: | Elements that contain renderable elements. For SVG container elements and graphics elements. |
| Inherited: | no |
| Percentages: | no |
| Media: | visual |
| Animatable: | yes |
The 'transform-origin' is the equivalent of the following specification: translate(<ox>, <oy>, <oz>) <transform> translate(-<ox>, -<oy>, -<oz>) .
If a <transform> already specifies a transformation origin the 'transform-origin' is still applied as per the equivalent specification specified above.
This property was lifted from the CSS Transformations specification.
The CSS Transformations uses percentages. May have to define 'transformationUnits' property that allows either 'userUnitsOnUse' or 'objectBoundingBox' to specified for an object.
The CSS Transformations says that the z component can only be a length. Does this mean that the 'transform-orgin' can be used to specify the 'perspective' of an object?
Alternatively the z component of 'transform-origin' could only be applicable if the 'perspective' of an element is not zero. In which case the z component could be specified with the key words: [front | center | back].
The 'perspective' property specifies a projeciton matrix to apply to child elements contained within the current element.
| Value: | <coordinate> | none |
| Initial: | none |
| Applies to: | Elements that contain renderable elements. For SVG container elements. |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
This property was lifted from the CSS Transformations specification.
This property name conflicts with current proposal. Conflicting name has been changed to 'perspective-point'.
This property is the equivalent of 'laygeredGroup' and hence is out of scope for SVG Transformations.
The 'perspective-origin' property establishes the X, Y position of the 'perspective' property.
| Value: | <list-of-numbers> | [left | center | right] [top | center | bottom] | none |
| Initial: | none |
| Applies to: | Elements that contain renderable elements. For SVG container elements. |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
This property was lifted from the CSS Transformations specification.
This property can be effectively be replaced by 'perspective-point'.
The 'perspective-point' property specifies a projeciton matrix to apply to elements.
| Value: | <list-of-numbers> | none |
| Initial: | none |
| Applies to: | Elements that contain renderable elements. For SVG container and graphical elements. |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
The Transformations Module defines additional transformations types to the TransformList.
matrix3d(<a> <b> <c> <d> <e> <f> <g> <h> <i> <j> <k> <l>), which specifies a transformation in the form of a 3D transformation matrix of 12 values. matrix3d(a,b,c,d,e,f,g,h,i,j,k,l) is equivalent to applying the transformation matrix [a b c d e f g h i j k l ].
translate3d(<tx> <ty> <tz>), which specifies a 3D translation by tx, ty and tz.
translateX(<tx>), which specifies a 3D translation by tx in the X direction.
translateY(<ty>), which specifies a 3D translation by ty in the Y direction.
translateZ(<tz>), which specifies a 3D translation by tz in the Z direction.
We are considering the removal of translateX,Y,Z.
scale3d(<sx> [<sy> <sz>]), which specifies a 3D scale operation by sx, sy and sz.
If optional parameters sy and sz are not supplied the value of sx will be used for sy and sz.
scaleX(<sx>), which specifies a 3D scale operation by sx.
scaleY(<sy>), which specifies a 3D scale operation by sy.
scaleZ(<sz>), which specifies a 3D scale operation by sz.
We are considering the removal of scaleX,Y,Z.
rotate3d(<nx> <ny> <nz> <rotate-angle> [<cx> <cy> <cz>]), which specifies a 3D rotation by <rotate-angle> degrees in a given direction defined by nx, ny and nz about a point defined by cx, cy and cz.
Currently CSS Transformations specifies rotate3d in a different way.
rotateX(<rotate-angle> [<cy> <cz>]), which specifies a rotation by <rotate-angle> degrees about the X axis.
If optional parameters <cy> and <cz> are supplied, the rotation is about the point (cy, cz). The operation represents the equivalent of the following specification: translate3d(0, <cy>, <cz>) rotateX(<rotate-angle>) translate(0, -<cy>, -<cz>).
rotateY(<rotate-angle> [<cx> <cz>]), which specifies a rotation by <rotate-angle> degrees about the Y axis.
If optional parameters <cx> and <cz> are supplied, the rotation is about the point (cx, cz). The operation represents the equivalent of the following specification: translate3d(<cx>, 0, <cz>) rotateX(<rotate-angle>) translate3d(-<cx>, 0, -<cz>).
rotateZ(<rotate-angle> [<cx> <cy>]), which specifies a rotation by <rotate-angle> degrees about the Z axis.
If optional parameters <cx> and <cy> are supplied, the rotation is about the point (cx, cy). The operation represents the equivalent of the following specification: translate3d(<cx>, <cy>, 0) rotateX(<rotate-angle>) translate3d(-<cx>, -<cy>, 0).
skew(<angle-x> [<angle-y>]), which specifies a skew transformation along the X and Y axis by angle-x and angle-y respectively. If <angle-y> is not provided, then a value of 0 will be used for the Y angle.
We are considering the removal of this skew transformation.
Currently CSS Transformations specifies a 'perspective' property which is not part of this draft. This information is speicified by the 'perspective-point' property.
The schema for SVG Template 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: SVGMatrix3D, SVGTransformOrigin, SVGPerspectivePoint, SVGSVGElement SVGLocatable, TraitAccess.
The SVGMatrix3D interface corresponds to setting the equivalent matrix values of a component from the transform attribute specification. The SVGMatrix3D interface additionally inherits the methods from the SVGMatix interface. Inherited methods that return a reference to an SVGMatix instance, instead return a reference to an SVGMatix3D.
interface SVGMatrix3D
{
float getComponent3D(in unsigned long index)
raises(DOMException);
SVGMatrix3D multiply3D(in SVGMatrix3D secondMatrix);
SVGMatrix3D inverse()
raises(SVGException);
SVGMatrix3D translate3D(in float x, in float y, in float z);
SVGMatrix3D translateX(in float x);
SVGMatrix3D translateY(in float y);
SVGMatrix3D translateZ(in float z);
SVGMatrix3D scale3D(in float scaleFactor-x, in float scaleFactor-y, in scaleFactor-y);
SVGMatrix3D scaleX(in float scaleFactor);
SVGMatrix3D scaleY(in float scaleFactor);
SVGMatrix3D scaleZ(in float scaleFactor);
SVGMatrix3D rotate3D(in float angle);
SVGMatrix3D rotateX(in float angle);
SVGMatrix3D rotateY(in float angle);
SVGMatrix3D rotateZ(in float angle);
SVGMatrix3D skew(in float angle-x, in float angle-y);
};
The SVGTransformOrigin interface corresponds to the 'transform-origin' property.
Interface SVGTransformOrigin
{
attribute float ox;
attribute float oy;
attribute float oz;
SVGTransformOrigin getTransformOriginTrait();
SVGTransformOrigin getTransformOriginPresentationTrait();
void setPerspectiveTrait(in SVGTransformOrigin);
};
The SVGPerspectivePoint interface corresponds to the 'perspective-point' property.
Interface SVGPerspectivePoint
{
attribute float ex;
attribute float ey;
attribute float ez;
SVGPerspectivePoint getPerspectivePointTrait();
SVGPerspectivePoint getPerspectivePointPresentationTrait();
void setPerspectiveTrait(in SVGPerspectivePoint);
};
The SVGMatrix3D interface corresponds to creating a 3D Transformation Matrix.
interface SVGSVGElement : SVGLocatableElement, SVGTimedElement
{
SVGMatrix3D createSVGMatrix3DComponents
(
in float m1, in float m2, in float m3, in float m4,
in float m5, in float m6, in float m7, in float m8,
in float m9, in float m10, in float m11, in float m12
in float m13, in float m14, in float m15, in float m16
);
SVGPerspective createSVGerspective();
};
interface SVGLocatable
{
SVGMatrix3D getScreenCTM3D();
SVGPerspectivePoint getScreenPerspectivePoint();
};
interface TraitAccess
{
SVGMatrix3D getMatrix3DTrait(in DOMString name)
raises(DOMException);
SVGMatrix3D getMatrix3DPresentationTrait(in DOMString name)
raises(DOMException);
void setMatrix3DTrait(in DOMString name, in SVGMatrix matrix)
raises(DOMException);
};