You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1330 lines
54 KiB
1330 lines
54 KiB
<?xml version="1.0" encoding="utf-8" ?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
|
<head>
|
|
<meta content="text/html; charset=UTF-8" http-equiv="content-type"></meta>
|
|
<title>SVG Transforms 1.0, Part 2: Language</title>
|
|
<link rel="stylesheet" type="text/css" href="style/svg-style.css" />
|
|
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-WD" />
|
|
|
|
</head>
|
|
<body>
|
|
<div class="head">
|
|
<p>
|
|
<a href="http://www.w3.org/">
|
|
<img width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home" height="48" />
|
|
</a>
|
|
<!-- <object data="style/banner_svg_module.svg" type="image/svg+xml" height="48" width="256">
|
|
<img src="style/banner_svg_module.png" alt="svg banner logo" />
|
|
</object> -->
|
|
</p>
|
|
<h1>SVG Transforms 1.0, Part 2: Language</h1>
|
|
<h2 id="W3C-doctype">W3C Working Draft 20 March 2009</h2>
|
|
<dl>
|
|
<dt>This version:</dt>
|
|
<dd><a href="http://www.w3.org/TR/2009/WD-SVG-Transforms-20090320/">http://www.w3.org/TR/2009/WD-SVG-Transforms-20090320/</a></dd>
|
|
<dt>Latest version:</dt>
|
|
<dd><a href="http://www.w3.org/TR/SVG-Transforms">http://www.w3.org/TR/SVG-Transforms</a></dd>
|
|
<dt>Previous version:</dt>
|
|
<dd>This is the first public Working Draft</dd>
|
|
<dt>Editors:</dt>
|
|
<dd>
|
|
Jun Fujisawa, Canon Inc. <<a href="mailto:fujisawa.jun@canon.co.jp">fujisawa.jun@canon.co.jp</a>>
|
|
</dd>
|
|
<dd>
|
|
Anthony Grasso, Canon Inc. <<a href="mailto:anthony.grasso@cisra.canon.com.au">anthony.grasso@cisra.canon.com.au</a>>
|
|
</dd>
|
|
<dt>Authors:</dt>
|
|
<dd>
|
|
The authors of this specification are the participants of the W3C SVG Working Group.
|
|
</dd>
|
|
</dl>
|
|
|
|
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2007 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
|
|
</div>
|
|
<hr title="Separator from Header"></hr>
|
|
<h2 id="abstract">
|
|
Abstract</h2>
|
|
<p>
|
|
This working draft defines features of the Scalable Vector Graphics (SVG) Language
|
|
that are specifically for display environments.
|
|
</p>
|
|
<p>
|
|
This document defines the markup used by SVG Transforms. SVG Transforms allows
|
|
two-dimensional objects to be transformed using three-dimensional transformations.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
This document defines the markup used by SVG Transforms.
|
|
</p>
|
|
<h2 id="status">
|
|
Status of This Document
|
|
</h2>
|
|
<p><em>This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="http://www.w3.org/TR/">W3C technical reports index</a> at http://www.w3.org/TR/.</em></p>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.</p>
|
|
|
|
<p>
|
|
This document is the first public working draft of this specification. There will be
|
|
an accompanying <!-- <a href="#SVG12TransformsPrimer">SVG Transforms 1.0, Part 1:
|
|
Primer</a> --> Transforms Primer that lists the ways SVG Transforms may be used.
|
|
This document is published in coordination with the CSS Working Group, which is
|
|
exploring similar functionality, with the aim of keeping compatibility betweeen
|
|
SVG and CSS.
|
|
</p>
|
|
<p>
|
|
This document has been produced by the <a href="http://www.w3.org/Graphics/SVG">W3C
|
|
SVG Working Group</a> as part of the W3C <a href="http://www.w3.org/Graphics/Activity">
|
|
Graphics Activity</a> within the <a href="http://www.w3.org/Interaction/">Interaction
|
|
Domain</a>.
|
|
</p>
|
|
<p>
|
|
We explicitly invite comments on this specification. Please send them to <a href="mailto:www-svg@w3.org">
|
|
www-svg@w3.org</a> (<a href="http://lists.w3.org/Archives/Public/www-svg/">archives</a>),
|
|
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 <a href="mailto:www-svg-request@w3.org">
|
|
www-svg-request@w3.org</a> with the word subscribe in the subject line.
|
|
</p>
|
|
<p>
|
|
The latest information regarding <a href="http://www.w3.org/Graphics/SVG/Disclosures">
|
|
patent disclosures</a> 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.
|
|
</p>
|
|
|
|
<p>This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. W3C maintains a <a rel="disclosure" href="http://www.w3.org/2004/01/pp-impl/19480/status">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
|
|
|
|
<hr></hr>
|
|
<h2 id="howto">
|
|
How to read this document and give feedback</h2>
|
|
<p>
|
|
This working draft of SVG Transforms introduces new 3D transforms syntax
|
|
and markup for the SVG language, extending the existing transforms functionality.
|
|
One of the goals is that this specification can be re-used more easily by other
|
|
specifications that want to have advanced Transforms 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.
|
|
</p>
|
|
<p>
|
|
The main purpose of this document is to encourage public feedback. The best way
|
|
to give feedback is by sending an email to <a href="mailto:www-svg@w3.org">www-svg@w3.org</a>.
|
|
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 "Transforms Functionality"). If you have comments
|
|
on multiple areas of this document, then it is probably best to split those comments
|
|
into multiple messages.
|
|
</p>
|
|
<p>
|
|
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 document<span class="feedback">like this</span>.
|
|
There is also a specific area related to the specification that is listed here:
|
|
</p>
|
|
<div id="toc">
|
|
<h2>
|
|
Contents</h2>
|
|
<ol class="toc">
|
|
<li>1. <a href="#sec-intro">Introduction</a>
|
|
<ol class="toc">
|
|
<li>1.1. <a href="#projection-matrix-definition">Projection Matrix</a></li>
|
|
<li>1.2. <a href="#threed-matrix-definition">3D Transformation Matrix</a></li>
|
|
</ol>
|
|
</li>
|
|
<li>2. <a href="#perspective-definitions">Perspective Definitions</a>
|
|
<ol class="toc">
|
|
<li>2.1. <a href="#transform-origin">The <span class="prop-name">'transform-origin'</span> property</a>
|
|
<ol class="toc">
|
|
<li>1.2.1. <a href="#threed-translate-definition">3D Translation Matrix</a></li>
|
|
<li>1.2.2. <a href="#threed-scale-definition">3D Scaling Matrix</a></li>
|
|
<li>1.2.3. <a href="#threed-rotate-definition">3D Rotation</a></li>
|
|
<li>1.2.4. <a href="#threed-rotate-x-definition">3D Rotation about X</a></li>
|
|
<li>1.2.5. <a href="#threed-rotate-y-definition">3D Rotation about Y</a></li>
|
|
<li>1.2.6. <a href="#threed-rotate-z-definition">3D Rotation about Z</a></li>
|
|
</ol>
|
|
</li>
|
|
<li>2.2. <a href="#perspective-property">The <span class="prop-name">'perspective'</span> Property</a></li>
|
|
</ol>
|
|
</li>
|
|
<li>3. <a href="#transform-list-extensions">TransformList Extensions</a></li>
|
|
<li>4. <a href="#animate-transform-extensions"><span class="element-name">'animateTransform'</span> Extensions</a></li>
|
|
<li>5. <a href="#_4x4-to-3x3-conversion">Converting a 4x4 to a 3x3 matrix</a></li>
|
|
<li>6. <a href="#RelaxNG">RelaxNG Schema for SVG Transforms 1.0</a></li>
|
|
<li>7. <a href="#DOMInterfaces">DOM interfaces</a>
|
|
<ol class="toc">
|
|
<li>7.1. <a href="#SVGMatrix">Interface <span class="DOMInterfaceName">SVGMatrix</span></a></li>
|
|
<li>7.2. <a href="#SVGPerspective">Interface <span class="DOMInterfaceName">SVGPerspective</span></a></li>
|
|
<li>7.3. <a href="#SVGTransformOrigin">Interface <span class="DOMInterfaceName">SVGTransformOrigin</span></a></li>
|
|
<li>7.4. <a href="#SVGSVGElement">Interface <span class="DOMInterfaceName">SVGSVGElement</span></a></li>
|
|
<li>7.5. <a href="#TraitAccess">Interface <span class="DOMInterfaceName">TraitAccess</span></a></li>
|
|
</ol>
|
|
</li>
|
|
<li>8. <a href="#refs">References</a>
|
|
<ol class="toc">
|
|
<li>8.1. <a href="#normrefs">Normative References</a></li>
|
|
<li>8.2. <a href="#informrefs">Informative References</a></li>
|
|
</ol>
|
|
</li>
|
|
<li>9. <a href="#acknowledgements">Acknowledgements</a></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div id="sec-intro" class="section">
|
|
<h2 id="intro">
|
|
1. Introduction
|
|
</h2>
|
|
<p>
|
|
This document is normative and lists features that may be used in the context of display. The various
|
|
scenarios are listed in the SVG Transforms Requirements document.
|
|
</p>
|
|
<p>
|
|
Note that even though this specification references parts of <a href="#ref-svgT12">
|
|
SVG Tiny 1.2</a> it does not require a complete or SVG Tiny 1.2 implementation.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<p>
|
|
The SVG Transforms module extends the two-dimensional transformation pipeline in SVG to
|
|
allow graphical elements to be transformed in three-dimensions. For elements to be
|
|
transformed using three-dimensonal transformations a Z axis is introduced by this module.
|
|
The elements in SVG can be positioned along the Z axis and transformed in 3D space, however
|
|
the elements themselves still remain two-dimensional. A perspective projection can be
|
|
applied to elements to give the illusion of depth. The projection plane for a perspective
|
|
projection is the X-Y plane (where Z = 0). All are still rendered to this plane. Unless
|
|
stated otherwise, all elements are rendered in document order as per the existing SVG
|
|
specifications.
|
|
</p>
|
|
<h3 id="projection-matrix-definition">
|
|
1.1. Projection Matrix
|
|
</h3>
|
|
<p>
|
|
The projection matrix provides a means for depth information of an element to be
|
|
specified. Depth information can be represented as a 4x4 matrix of the following
|
|
form:
|
|
</p>
|
|
<pre>
|
|
1 0 0 0
|
|
0 1 0 0
|
|
0 0 0 0
|
|
0 0 1/-d 1
|
|
</pre>
|
|
<p>
|
|
The projection transformation matrix is also expressed as a vector <strong>[x y d]</strong>.
|
|
The <span class="prop-name"><a href="#perspective-property">'perspective'</a></span> property is used to set the
|
|
perspective projection matrix of an object.
|
|
</p>
|
|
<h3 id="threed-matrix-definition">
|
|
1.2. 3D Transformation Matrix
|
|
</h3>
|
|
<p>
|
|
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 transforms can
|
|
be represted as a 4x4 transformation matrices.
|
|
</p>
|
|
<p>
|
|
The 3D transforms matrices are of the following form:
|
|
</p>
|
|
<pre>
|
|
a b c d
|
|
e f g h
|
|
i j k m
|
|
0 0 0 1
|
|
</pre>
|
|
<p>
|
|
The 3D transformation matrix is also expressed as a vector
|
|
<strong>[a b c d e f g h i j k m]</strong>. The transforms in the
|
|
<a href="#transform-list-extensions">TransformsList Extensions</a>
|
|
can be used to set the transformation of an object.
|
|
</p>
|
|
<p class="issue">
|
|
The <a href="http://dev.w3.org/csswg/css3-3d-transforms">CSS 3D Transforms</a>
|
|
specification uses 16 values.
|
|
</p>
|
|
<h4 id="threed-translate-definition">1.2.1. 3D Translation Matrix</h4>
|
|
<p>
|
|
A 3D Translation is equivalent to the matrix:
|
|
</p>
|
|
<pre>
|
|
1 0 0 tx
|
|
0 1 0 ty
|
|
0 0 1 tz
|
|
0 0 0 1
|
|
</pre>
|
|
<h4 id="threed-scale-definition">1.2.2. 3D Scaling Matrix</h4>
|
|
<p>
|
|
A 3D Scaling is equivalent to the matrix:
|
|
</p>
|
|
<pre>
|
|
sx 0 0 0
|
|
0 sy 0 0
|
|
0 0 sz 0
|
|
0 0 0 1
|
|
</pre>
|
|
<h4 id="threed-rotate-definition">1.2.3. 3D Rotation</h4>
|
|
<p>
|
|
A 3D Rotation is equivalent to the matrix:
|
|
</p>
|
|
<pre>
|
|
t.nx.nx + c t.nx.ny - s.nz t.nx.nz + s.ny 0
|
|
t.nx.ny + s.nz t.ny.ny + c t.ny.nz - s.nx 0
|
|
t.nx.nz - s.ny t.ny.nz + s.nx t.nz.nz + c 0
|
|
0 0 0 1
|
|
</pre>
|
|
<p>
|
|
where:
|
|
</p>
|
|
<pre>
|
|
c = cos(a)
|
|
s = sin(a)
|
|
t = 1 - cos(a)
|
|
</pre>
|
|
<h4 id="threed-rotate-x-definition">1.2.4. 3D Rotation about X</h4>
|
|
<p>
|
|
A 3D Rotation about the X axis is equivalent to the matrix:
|
|
</p>
|
|
<pre>
|
|
1 0 0 0
|
|
0 cos(a) -sin(a) 0
|
|
0 sin(a) cos(a) 0
|
|
0 0 0 1
|
|
</pre>
|
|
<h4 id="threed-rotate-y-definition">1.2.5. 3D Rotation about Y</h4>
|
|
<p>
|
|
A 3D Rotation about the Y axis is equivalent to the matrix:
|
|
</p>
|
|
<pre>
|
|
cos(a) 0 sin(a) 0
|
|
0 1 0 0
|
|
-sin(a) 0 cos(a) 0
|
|
0 0 0 1
|
|
</pre>
|
|
<h4 id="threed-rotate-z-definition">1.2.6. 3D Rotation about Z</h4>
|
|
<p>
|
|
A 3D Rotation about the Z axis is equivalent to the matrix:
|
|
</p>
|
|
<pre>
|
|
cos(a) -sin(a) 0 0
|
|
sin(a) cos(a) 0 0
|
|
0 0 1 0
|
|
0 0 0 1
|
|
</pre>
|
|
</div>
|
|
<div id="sec-perspective-definitions" class="section">
|
|
<h2 id="perspective-definitions">
|
|
2. Perspective Definitions
|
|
</h2>
|
|
<p class="issue">
|
|
The SVG Working Group is currently discussing how to give the author the
|
|
ability to change the Z order of objects. One possible solution is to use
|
|
the CSS <a href="http://dev.w3.org/csswg/css3-3d-transforms/#transform-style-property">'transform-style'</a>
|
|
property on a group. When set to "preserve-3d", it allows child elements in
|
|
the group to be re-ordered based on their Z position (rather than document
|
|
order). A similar option is to introduce a container element 'layeredG' or
|
|
'g3d' where the order of rendering the child elements is based on its Z
|
|
position. Note that in either case I different tree traversal order may
|
|
only be needed. This would help restrict the complexity when rendering
|
|
3D Transforms in SVG. The SVG Working Group believes this is the most
|
|
optimal solution without causing too many complexities to
|
|
SVG Implementations. The SVG Working Group welcomes any comments or
|
|
suggestions regarding this feature.
|
|
</p>
|
|
<h3 id="transform-origin">
|
|
2.1. The <span class="prop-name">'transform-origin'</span> property
|
|
</h3>
|
|
<p>
|
|
The <span class="prop-name">'transform-origin'</span> property establishes the transformation
|
|
origin of an element in the element's <span class="svg-term"><a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermCurrentTransformationMatrix">
|
|
CTM </a></span>.
|
|
</p>
|
|
<div class="propdef">
|
|
<dl>
|
|
<dt><span class="prop-name">'transform-origin'</span></dt>
|
|
<dd>
|
|
<table summary="transform-origin property" class="propinfo" cellspacing="0" cellpadding="0">
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Value:</em>
|
|
</td>
|
|
<td>
|
|
<list-of-lengths> | none
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Initial:</em>
|
|
</td>
|
|
<td>
|
|
0 0 0
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Applies to:</em>
|
|
</td>
|
|
<td>
|
|
Renderable elements. For SVG container elements and graphics
|
|
elements.
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Inherited:</em>
|
|
</td>
|
|
<td>
|
|
no
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Percentages:</em>
|
|
</td>
|
|
<td>
|
|
no
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Media:</em>
|
|
</td>
|
|
<td>
|
|
visual
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em><a href="http://www.w3.org/TR/SVGTiny12/animate.html#Animatable">Animatable</a>:
|
|
</em>
|
|
</td>
|
|
<td>
|
|
yes
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<div>
|
|
<dl>
|
|
<dt>
|
|
<span class="attr-value">none</span>
|
|
</dt>
|
|
<dd>
|
|
No new transformation origin is established. This is the
|
|
<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermLacunaValue">
|
|
<span class="svg-term">lacuna value</span>.
|
|
</a>
|
|
</dd>
|
|
<dt>
|
|
<a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeLength">
|
|
<span class="attr-value"><list-of-lengths></span>
|
|
</a>
|
|
</dt>
|
|
<dd>
|
|
A list of three <a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeLength">
|
|
<span class="attr-value"><lengths></span></a>s (<span class="attr-value"><ox></span>,
|
|
<span class="attr-value"><oy></span> and <span class="attr-value"><oz></span>),
|
|
separated by white space and or a comma, which specify the origin to transform the
|
|
element about. The coordinate definitions are as follows:
|
|
<ul>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value"><ox></span> specifies the <em>x</em>
|
|
<a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeCoordinate">
|
|
<span class="attr-value"><coordinate></span>
|
|
</a>
|
|
of the new origin of the element using one of the values:
|
|
<span class="attr-value">left | center | right | <percentage></span>.
|
|
This coordinate is established using the
|
|
<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermBoundingBox"><span class="svg-term">bounding box</span></a>
|
|
of the element to which the transform is applied
|
|
(see <a href="http://www.w3.org/TR/SVGTiny12/coords.html#ObjectBoundingBoxUnits">Object bounding box units</a>).
|
|
</p>
|
|
<p>
|
|
The value <span class="attr-value">left</span> means the left most edge of the object's bounding box.
|
|
</p>
|
|
<p>
|
|
The value <span class="attr-value">center</span> means the horizontal center of the object's bounding box.
|
|
</p>
|
|
<p>
|
|
The value <span class="attr-value">right</span> means the right most edge of the object's bounding box.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value"><oy></span> specifies the <em>y</em>
|
|
<a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeCoordinate">
|
|
<span class="attr-value"><coordinate></span>
|
|
</a>
|
|
of the new origin of the element using one of the values:
|
|
<span class="attr-value">top | center | bottom | <percentage></span>.
|
|
This coordinate is established using the
|
|
<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermBoundingBox"><span class="svg-term">bounding box</span></a>
|
|
of the element to which the transform is applied
|
|
(see <a href="http://www.w3.org/TR/SVGTiny12/coords.html#ObjectBoundingBoxUnits">Object bounding box units</a>).
|
|
</p>
|
|
<p>
|
|
The value <span class="attr-value">top</span> means the top most edge of the object's bounding box.
|
|
</p>
|
|
<p>
|
|
The value <span class="attr-value">center</span> means the vertical center of the object's bounding box.
|
|
</p>
|
|
<p>
|
|
The value <span class="attr-value">bottom</span> means the right most edge of the object's bounding box.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<span class="attr-value"><oz></span> specifies the <em>z</em>
|
|
<a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeCoordinate">
|
|
<span class="attr-value"><coordinate></span>
|
|
</a>
|
|
of the new origin of the element. The value is in the current
|
|
<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermUserCoordinateSystem">
|
|
<span class="svg-term">user coordinate system</span>
|
|
</a>.
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<p>
|
|
The <span class="prop-name">'transform-origin'</span> is the equivalent of the following
|
|
specification: <span class="attr-value">translate(<ox>, <oy>, <oz>)
|
|
<a href="http://www.w3.org/TR/SVGTiny12/coords.html#TransformList"><transform>
|
|
</a>translate(-<ox>, -<oy>, -<oz>) </span>.
|
|
If a <span class="attr-value"><a href="http://www.w3.org/TR/SVGTiny12/coords.html#TransformList">
|
|
<transform></a></span> already specifies a transformation origin the <span
|
|
class="prop-name">'transform-origin'</span> is still applied as per the equivalent
|
|
specification specified above.
|
|
</p>
|
|
<p class="note">
|
|
This property is similar to property in the <a href="http://dev.w3.org/csswg/css3-3d-transforms">
|
|
CSS 3D Transforms </a>specification.
|
|
</p>
|
|
<h3 id="perspective-property">
|
|
2.2. The <span class="prop-name">'perspective'</span> Property
|
|
</h3>
|
|
<p>
|
|
The <span class="prop-name">'perspective'</span> property specifies a projeciton
|
|
matrix to apply to child elements contained within the current element. It effectively
|
|
sets the viewpoint to project an element on the X-Y viewing plane (where z=0).
|
|
</p>
|
|
<div class="propdef">
|
|
<dl>
|
|
<dt><span class="prop-name">'perspective'</span></dt>
|
|
<dd>
|
|
<table summary="perspective property" class="propinfo" cellspacing="0" cellpadding="0">
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Value:</em>
|
|
</td>
|
|
<td>
|
|
<list-of-lengths> | none
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Initial:</em>
|
|
</td>
|
|
<td>
|
|
none
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Applies to:</em>
|
|
</td>
|
|
<td>
|
|
Renderable elements. For SVG container elements and graphics
|
|
elements.
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Inherited:</em>
|
|
</td>
|
|
<td>
|
|
no
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Percentages:</em>
|
|
</td>
|
|
<td>
|
|
N/A
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em>Media:</em>
|
|
</td>
|
|
<td>
|
|
visual
|
|
</td>
|
|
</tr>
|
|
<tr valign="baseline">
|
|
<td>
|
|
<em><a href="http://www.w3.org/TR/SVGTiny12/animate.html#Animatable">Animatable</a>:
|
|
</em>
|
|
</td>
|
|
<td>
|
|
yes
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<div>
|
|
<dl>
|
|
<dt><span class="prop-value">none</span></dt>
|
|
<dd>
|
|
No perspective transformation is applied to the element. This is the
|
|
<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermLacunaValue">
|
|
<span class="svg-term">lacuna value</span>.
|
|
</a>
|
|
</dd>
|
|
<dt>
|
|
<a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeLength">
|
|
<span class="attr-value"><list-of-lengths></span>
|
|
</a>
|
|
</dt>
|
|
<dd>
|
|
A list of three <a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeLength">
|
|
<span class="attr-value"><lengths></span></a>s (<span class="attr-value"><px></span>,
|
|
<span class="attr-value"><py></span> and <span class="attr-value"><pd></span>),
|
|
separated by white space and or a comma, which specify the position and depth of the perspective projection matrix for
|
|
an element. The coordinate definitions are as follows:
|
|
<ul>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value"><px></span> specifies the <em>x</em>
|
|
<a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeCoordinate">
|
|
<span class="attr-value"><coordinate></span>
|
|
</a>
|
|
of the perspective viewpoint on the X-Y viewing plane. The value is in the current
|
|
<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermUserCoordinateSystem">
|
|
<span class="svg-term">user coordinate system</span>
|
|
</a>.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value"><py></span> specifies the <em>y</em>
|
|
<a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeCoordinate">
|
|
<span class="attr-value"><coordinate></span>
|
|
</a>
|
|
of the perspective viewpoint on the X-Y viewing plane. The value is in the current
|
|
<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermUserCoordinateSystem">
|
|
<span class="svg-term">user coordinate system</span>
|
|
</a>.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value"><pd></span> specifies the
|
|
<a href="http://www.w3.org/TR/SVGTiny12/types.html#DataTypeCoordinate">
|
|
<span class="attr-value"><coordinate></span>
|
|
</a>
|
|
representing the viewpoint distance from the X, Y viewing plane. The value is in the current
|
|
<a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermUserCoordinateSystem">
|
|
<span class="svg-term">user coordinate system</span>
|
|
</a>.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<p class="note">
|
|
This property is similar to property in the <a href="http://dev.w3.org/csswg/css3-3d-transforms">
|
|
CSS 3D Transforms </a>specification.
|
|
</p>
|
|
<p class="issue">
|
|
Consider adding "near" and "far" planes to the 'perspective'
|
|
property. Could have a value like: perspective(<px> <py> <pd> [<n> <f>]).
|
|
<n> and <f> define the Near and Far clipping planes for the
|
|
perspective view.
|
|
</p>
|
|
</div>
|
|
<div id="sec-transform-list-extensions" class="section">
|
|
<h2 id="transform-list-extensions">
|
|
3. TransformList Extensions
|
|
</h2>
|
|
<p>
|
|
SVG Transforms extends the transform types availble in the SVG
|
|
<a href="http://www.w3.org/TR/SVGTiny12/coords.html#TransformList">
|
|
<span>TransformList</span>. </a>
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value">matrix(a b c d e f g h i j k m)</span>, which specifies a transformation in the
|
|
form of a <a href="#threed-matrix-definition">3D transformation matrix</a> of 12 values.
|
|
<span class="attr-value">matrix(a,b,c,d,e,f,g,h,i,j,k,m)</span> is equivalent
|
|
to applying the transformation matrix <strong>[a b c d e f g h i j k m]</strong>.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value">translate(<tx> [<ty> [<tz>]])</span>, which
|
|
specifies a <a href="#threed-translate-definition">3D translation</a> by
|
|
<var>tx</var>, <var>ty</var> and <var>tz</var>. If <em><ty></em> and <em><tz></em>
|
|
are not provided, it is assumed to be zero.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value">scale(<sx> [<sy> [<sz>]])</span>, which
|
|
specifies a <a href="#threed-scale-definition">3D scale</a> operation by
|
|
<var>sx</var>, <var>sy</var> and <var>sz</var>. If <em><sy></em> and <em><sz></em>
|
|
are not provided, it is assumed to be equal to <em><sx></em>.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value">rotate(<rotate-angle> <nx> <ny> <nz> [<cx> <cy> <cz>])</span>,
|
|
which specifies a <a href="#threed-rotate-definition">3D rotation</a> by <span class="attr-value">
|
|
<rotate-angle></span> degrees in the direction defined by the vector <span class="attr-value"><nx> <ny> <nz></span>
|
|
about a given point.
|
|
</p>
|
|
<p>
|
|
If optional parameters <span class="attr-value"><cx></span>, <span class="attr-value"><cy></span> and
|
|
<span class="attr-value"><cz></span> are not supplied, the rotation is about the origin of the current user
|
|
coordinate system.
|
|
</p>
|
|
<p>
|
|
If optional parameters <span class="attr-value"><cx></span>, <span class="attr-value"><cy></span> and
|
|
<span class="attr-value"><cz></span> are supplied, the rotation
|
|
is about the point (<var>cx</var>, <var>cy</var> and <var>cz</var>). The operation
|
|
represents the equivalent of the following specification:
|
|
<span class="attr-value">translate(<cx>, <cy>, <cz>)
|
|
rotate(<rotate-angle> <nx> <ny> <nz>) translate(-<cx>, -<cy>, -<cz>)</span>.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value">rotateX(<rotate-angle> [<cy> <cz>])</span>,
|
|
which specifies a <a href="#threed-rotate-definition">rotation</a> by <span class="attr-value">
|
|
<rotate-angle></span> degrees about the X axis.
|
|
</p>
|
|
<p>
|
|
If optional parameters <span class="attr-value"><cy></span> and <span class="attr-value">
|
|
<cz></span> are supplied, the rotation is about the point (<var>cy</var>,
|
|
<var>
|
|
cz</var>). The operation represents the equivalent of the following specification:
|
|
<span class="attr-value">translate(0, <cy>, <cz>) rotateX(<rotate-angle>)
|
|
translate(0, -<cy>, -<cz>)</span>.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value">rotateY(<rotate-angle> [<cx> <cz>])</span>,
|
|
which specifies a <a href="#threed-rotate-definition">rotation</a> by <span class="attr-value">
|
|
<rotate-angle></span> degrees about the Y axis.
|
|
</p>
|
|
<p>
|
|
If optional parameters <span class="attr-value"><cx></span> and <span class="attr-value">
|
|
<cz></span> are supplied, the rotation is about the point (<var>cx</var>,
|
|
<var>
|
|
cz</var>). The operation represents the equivalent of the following specification:
|
|
<span class="attr-value">translate(<cx>, 0, <cz>) rotateX(<rotate-angle>)
|
|
translate(-<cx>, 0, -<cz>)</span>.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<p>
|
|
<span class="attr-value">rotateZ(<rotate-angle> [<cx> <cy>])</span>,
|
|
which specifies a <a href="#threed-rotate-definition">rotation</a> by <span class="attr-value">
|
|
<rotate-angle></span> degrees about the Z axis.
|
|
</p>
|
|
<p>
|
|
If optional parameters <span class="attr-value"><cx></span> and <span class="attr-value">
|
|
<cy></span> are supplied, the rotation is about the point (<var>cx</var>,
|
|
<var>
|
|
cy</var>). The operation represents the equivalent of the following specification:
|
|
<span class="attr-value">translate(<cx>, <cy>, 0) rotateX(<rotate-angle>)
|
|
translate(-<cx>, -<cy>, 0)</span>.
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="sec-animate-transform-extensions" class="section">
|
|
<h2 id="animate-transform-extensions">
|
|
4. <span class="element-name">'animateTransform'</span> Extensions
|
|
</h2>
|
|
<p>
|
|
SVG Transforms extends the <a href="http://www.w3.org/TR/SVGTiny12/animate.html#AnimateTransformElement"><span class="element-name">'animateTransform'</span></a>
|
|
element <span class="adef">'type'</span> to include the <a href="#transform-list-extensions">TransformList</a>
|
|
extensions.
|
|
</p>
|
|
|
|
<p><em>Attribute definition:</em></p>
|
|
<dl class="definitions">
|
|
<dt id="AnimateTransformElementTypeAttribute"><span class="adef">type</span> = <span class="attr-value">"translate" | "scale" | "rotate" | "rotateX" | "rotateY" | "rotateZ" | "skewX" | "skewY" </span></dt>
|
|
|
|
<dd><p>Indicates the type of transformation which is to have
|
|
its values change over time. If <a href="#AnimateTransformElementTypeAttribute"><span class="attr-name">'type'</span></a> has an <a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermUnsupportedValue"><span class="svg-term">unsupported value</span></a> (e.g. <span class="attr-value">type="foo"</span> or <span class="attr-value">type="ref(svg)"</span>) the <a href="http://www.w3.org/TR/SVGTiny12/animate.html#AnimateTransformElement"><span class="element-name">'animateTransform'</span></a> element is ignored.</p>
|
|
|
|
<p class="anim-target">
|
|
<a href="http://www.w3.org/TR/SVGTiny12/animate.html#Animatable">Animatable</a>: no.</p>
|
|
</dd>
|
|
</dl>
|
|
<p>The <a href="http://www.w3.org/TR/SVGTiny12/animate.html#FromAttribute"><span class="attr-name">'from'</span></a>, <a href="http://www.w3.org/TR/SVGTiny12/animate.html#ByAttribute"><span class="attr-name">'by'</span></a> and <a href="http://www.w3.org/TR/SVGTiny12/animate.html#ToAttribute"><span class="attr-name">'to'</span></a> attributes take a value
|
|
expressed using the same syntax that is available for the given
|
|
transformation type:</p>
|
|
|
|
<ul>
|
|
<li>
|
|
For a <span class="attr-value">type="translate"</span>,
|
|
each individual value is expressed as <span class="attr-value"><tx> [,<ty> [,<tz>]]</span>.
|
|
</li>
|
|
<li>
|
|
For a <span class="attr-value">type="scale"</span>, each
|
|
individual value is expressed as <span class="attr-value"><sx> [,<sy>[,<sz>]]</span>.
|
|
</li>
|
|
<li>
|
|
For a <span class="attr-value">type="rotate"</span>, each
|
|
individual value is expressed as <span class="attr-value">
|
|
rotate(<rotate-angle> <nx> <ny> <nz> [<cx> <cy> <cz>])
|
|
</span>.
|
|
</li>
|
|
<li>
|
|
For a <span class="attr-value">type="rotateX"</span>, each
|
|
individual value is expressed as <span class="attr-value">
|
|
rotateX(<rotate-angle> [<cy> <cz>])
|
|
</span>.
|
|
</li>
|
|
<li>
|
|
For a <span class="attr-value">type="rotateY"</span>, each
|
|
individual value is expressed as <span class="attr-value">
|
|
rotateY(<rotate-angle> [<cx> <cz>])
|
|
</span>.
|
|
</li>
|
|
<li>
|
|
For a <span class="attr-value">type="rotateZ"</span>, each
|
|
individual value is expressed as <span class="attr-value">
|
|
rotateZ(<rotate-angle> [<cx> <cy>])
|
|
</span>.
|
|
</li>
|
|
<li>
|
|
For a <span class="attr-value">type="skewX"</span> and
|
|
<span class="attr-value">type="skewY"</span>, each individual
|
|
value is expressed as <span class="attr-value"><skew-angle></span>.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="sec-matrix-conversion" class="section">
|
|
<h2 id="_4x4-to-3x3-conversion">
|
|
5. Converting a 4x4 to a 3x3 matrix
|
|
</h2>
|
|
<p>
|
|
A rectangle ABCD is given on plane X-Y. When a 3D affine transform and perspective
|
|
projection are applied, a quadrangle A'B'C'D' will appear on the X-Y plane. Note the
|
|
X-Y plane is the projection plane. Generally, this mapping is expressed as a 4x4 matrix.
|
|
</p>
|
|
<p>
|
|
An affine <a href="#threed-matrix-definition">3D Transform Matrix</a> <em>T</em> is
|
|
given as
|
|
</p>
|
|
<pre>
|
|
| a11 a12 a13 a14 |
|
|
M = | a21 a22 a23 a24 |
|
|
| a31 a32 a33 a34 |
|
|
| 0 0 0 1 |
|
|
</pre>
|
|
<p>
|
|
A <a href="#projection-matrix-definition">Perspective Projection Matrix</a>
|
|
<em>P</em> is given as
|
|
</p>
|
|
<pre>
|
|
| 1 0 0 0 |
|
|
P = | 0 1 0 0 |
|
|
| 0 0 0 0 |
|
|
| 0 0 1/d 1 |
|
|
</pre>
|
|
<p>
|
|
The combined matrix <em>M</em>can be expressed as
|
|
</p>
|
|
<pre>
|
|
M = P.T
|
|
|
|
| 1 0 0 0 | | a11 a12 a13 a14 |
|
|
= | 0 1 0 0 |.| a21 a22 a23 a24 |
|
|
| 0 0 0 0 | | a31 a32 a33 a34 |
|
|
| 0 0 1/d 1 | | 0 0 0 1 |
|
|
|
|
| a11 a12 a13 a14 |
|
|
= | a21 a22 a23 a24 |
|
|
| 0 0 0 0 |
|
|
| a31/d a32/d a33/d (a34/d)+1 |
|
|
|
|
= Expression 1
|
|
</pre>
|
|
<p>
|
|
An arbitary point <em>K</em> can be expressed as (<em>kx</em>, <em>ky</em>, 0).
|
|
If the point <em>K</em> is transformed to point <em>K'</em>(<em>k'x</em>,<em>k'y</em>,0),
|
|
the eqation is derived
|
|
</p>
|
|
<pre>
|
|
| k'x | | kx |
|
|
| k'y | = M.| ky |
|
|
| 0 | | 0 |
|
|
| k'w | | 1 |
|
|
|
|
| a11 a12 a13 a14 | | kx |
|
|
= | a21 a22 a23 a24 |.| ky |
|
|
| 0 0 0 0 | | 0 |
|
|
| a31/d a32/d a33/d (a34/d)+1 | | 1 |
|
|
|
|
| a11.kx + a12.ky + a14 |
|
|
= | a21.kx + a22.ky + a24 |
|
|
| 0 |
|
|
| (a31/d).kx + (a32/d).ky + (a34/d)+1 |
|
|
|
|
= Expression 2
|
|
</pre>
|
|
<p>
|
|
A non-affine 3x3 matrix (<em>F</em>) can be expressed as a 4x4 where the components that
|
|
make up the Z axis are set to 0 as shown below
|
|
</p>
|
|
<pre>
|
|
| b11 b12 0 b14 |
|
|
F = | b21 b22 0 b24 |
|
|
| 0 0 0 0 |
|
|
| b41 b42 0 1 |
|
|
</pre>
|
|
<p>
|
|
If matrix <em>F</em> can be used to map point <em>K</em> to point <em>K'</em> as
|
|
shown below
|
|
</p>
|
|
<pre>
|
|
| k'x | | kx |
|
|
| k'y | = F.| ky |
|
|
| 0 | | 0 |
|
|
| k'w | | 1 |
|
|
|
|
| b11 b12 0 b14 | | kx |
|
|
= | b21 b22 0 b24 |.| ky |
|
|
| 0 0 0 0 | | 0 |
|
|
| b41 b42 0 1 | | 1 |
|
|
|
|
| b11.kx + b12.ky + b14 |
|
|
= | b21.kx + b22.ky + b24 |
|
|
| 0 |
|
|
| b41.kx + b42.ky + 1 |
|
|
|
|
= Expression 3
|
|
</pre>
|
|
<p>
|
|
<em>Expression 2</em> can be shown to be related to <em>Expression 3</em>
|
|
for any arbitary point <em>kx</em>, <em>ky</em> by a constant <em>m</em>
|
|
</p>
|
|
<pre>
|
|
| a11.kx + a12.ky + a14 | | m.(b11.kx + b12.ky + b14) |
|
|
| a21.kx + a22.ky + a24 | = | m.(b21.kx + b22.ky + b24) |
|
|
| 0 | | 0 |
|
|
| (a31/d).kx + (a32/d).ky + (a34/d)+1 | | m.(b41.kx + b42.ky + 1) |
|
|
</pre>
|
|
<p>
|
|
Thus it can be said from the above relationship
|
|
</p>
|
|
<pre>
|
|
a11 = m.b11
|
|
a12 = m.b12
|
|
a14 = m.b14
|
|
a21 = m.b21
|
|
a22 = m.b22
|
|
a24 = m.b24
|
|
a31/d = m.b41
|
|
a32/d = m.b42
|
|
(a34/d) + 1 = m
|
|
</pre>
|
|
<p>
|
|
Therefore, the combination of An affine <a href="#threed-matrix-definition">3D Transform Matrix</a>
|
|
and a <a href="#projection-matrix-definition">Perspective Projection Matrix</a> can be expressed
|
|
by using a 3x3 matirx as follows
|
|
</p>
|
|
<pre>
|
|
| a11 a12 a14 |
|
|
| a21 a22 a24 |
|
|
| a31/d a32/d (a34/d) + 1 |
|
|
</pre>
|
|
</div>
|
|
<div id="sec-schema" class="section">
|
|
<h2 id="RelaxNG">
|
|
6. RelaxNG Schema for SVG Transforms 1.0</h2>
|
|
<p>
|
|
The schema for SVG Transforms 1.0 is written in <a href="http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf">
|
|
RelaxNG</a> [<a href="#ref-RNG">RelaxNG</a>], a namespace-aware schema language
|
|
that uses the datatypes from <a href="http://www.w3.org/TR/2004/REC-xmlschema-2-20041028/">
|
|
XML Schema Part 2</a> [<a href="#ref-Schema2">Schema2</a>]. This allows namespaces
|
|
and modularity to be much more naturally expressed than using DTD syntax. The RelaxNG
|
|
schema for SVG Transforms 1.0 may be imported by other RelaxNG schemas, or combined
|
|
with other schemas in other languages into a multi-namespace, multi-grammar schema
|
|
using <a href="http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/">Namespace-based Validation
|
|
Dispatching Language</a> [<a href="#ref-NVDL">NVDL</a>].</p>
|
|
<p>
|
|
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).</p>
|
|
<p>
|
|
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 will be available soon. <!-- are available <a href="rng">here</a>. -->
|
|
</p>
|
|
</div>
|
|
<div id="sec-DOMInterfaces">
|
|
<h2 id="DOMInterfaces">
|
|
7. DOM interfaces</h2>
|
|
<div class="note">
|
|
The interfaces below will be made available in a IDL file for an upcoming draft.
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<h3 id="SVGMatrix">
|
|
7.1. Interface <span class="DOMInterfaceName">SVGMatrix</span>
|
|
</h3>
|
|
<p>
|
|
The <span class="DOMInterfaceName">SVGMatrix</span> interface corresponds to setting the equivalent
|
|
matrix values of a component from the <span class="attr-name"> transform</span> attribute specification.
|
|
</p>
|
|
<dl>
|
|
<dt>
|
|
<br />
|
|
<br />
|
|
<b>IDL Definition</b> </dt>
|
|
<dd>
|
|
<div class="idl-code">
|
|
<pre>
|
|
interface SVGMatrix
|
|
{
|
|
float getComponent(in unsigned long index)
|
|
raises(DOMException);
|
|
SVGMatrix multiply(in SVGMatrix secondMatrix);
|
|
SVGMatrix inverse()
|
|
raises(SVGException);
|
|
SVGMatrix translate(in float x, in float y, in float z);
|
|
SVGMatrix scale(in float scaleFactor-x, in float scaleFactor-y, in scaleFactor-y);
|
|
SVGMatrix rotate(in float angle);
|
|
SVGMatrix rotateX(in float angle);
|
|
SVGMatrix rotateY(in float angle);
|
|
SVGMatrix rotateZ(in float angle);
|
|
};
|
|
</pre>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
</dd>
|
|
<dt><b>Methods</b></dt>
|
|
<dd>
|
|
<dl>
|
|
<dt><span class="dom-method-name">getComponent3D</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">multiply3D</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">inverse</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">translate</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">scale</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">rotateX</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">rotateY</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">rotateZ</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
<h3 id="SVGPerspective">
|
|
7.2. Interface <span class="DOMInterfaceName">SVGPerspective</span>
|
|
</h3>
|
|
<p>
|
|
The <span class="DOMInterfaceName">SVGPerspective</span> interface corresponds
|
|
to the <span class="attr-name">'perspective'</span> attribute.
|
|
</p>
|
|
<dl>
|
|
<dt>
|
|
<br />
|
|
<br />
|
|
<b>IDL Definition</b> </dt>
|
|
<dd>
|
|
<div class="idl-code">
|
|
<pre>
|
|
Interface SVGPerspective
|
|
{
|
|
attribute float ex;
|
|
attribute float ey;
|
|
attribute float ez;
|
|
};
|
|
</pre>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
</dd>
|
|
<dt><b>Attributes</b></dt>
|
|
<dd>
|
|
<dl>
|
|
<dt><span class="dom-attr-type">float ex</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-attr-type">float ey</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-attr-type">float ez</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
<h3 id="SVGTransformOrigin">
|
|
7.3. Interface <span class="DOMInterfaceName">SVGTransformOrigin</span>
|
|
</h3>
|
|
<p>
|
|
The <span class="DOMInterfaceName">SVGTransformOrigin</span> interface corresponds
|
|
to the <span class="attr-name">'transform-origin'</span> attribute.
|
|
</p>
|
|
<dl>
|
|
<dt>
|
|
<br />
|
|
<br />
|
|
<b>IDL Definition</b> </dt>
|
|
<dd>
|
|
<div class="idl-code">
|
|
<pre>
|
|
Interface SVGTransformOrigin
|
|
{
|
|
attribute float ox;
|
|
attribute float oy;
|
|
attribute float oz;
|
|
};
|
|
</pre>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
</dd>
|
|
<dt><b>Attributes</b></dt>
|
|
<dd>
|
|
<dl>
|
|
<dt><span class="dom-attr-type">float ox</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-attr-type">float oy</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-attr-type">float oz</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
<h3 id="SVGSVGElement">
|
|
7.4. Interface <span class="DOMInterfaceName">SVGSVGElement</span>
|
|
</h3>
|
|
<p>
|
|
The <span class="DOMInterfaceName">SVGMatrix</span> interface corresponds to creating
|
|
a 3D Transformation Matrix.
|
|
</p>
|
|
<dl>
|
|
<dt>
|
|
<br />
|
|
<br />
|
|
<b>IDL Definition</b> </dt>
|
|
<dd>
|
|
<div class="idl-code">
|
|
<pre>
|
|
interface SVGSVGElement : SVGLocatableElement, SVGTimedElement
|
|
{
|
|
SVGMatrix createSVGMatrixComponents
|
|
(
|
|
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
|
|
);
|
|
SVGPerspective createSVGerspective
|
|
(
|
|
in float p1, in float p2, in float p3
|
|
);
|
|
};
|
|
</pre>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
</dd>
|
|
<dt><b>Methods</b></dt>
|
|
<dd>
|
|
<dl>
|
|
<dt><span class="dom-method-name">createSVGMatrixComponents</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">createSVGerspective</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
<h3 id="SVGLocatable">
|
|
Interface <span class="DOMInterfaceName">SVGLocatable</span>
|
|
</h3>
|
|
<p>
|
|
</p>
|
|
<dl>
|
|
<dt>
|
|
<br />
|
|
<br />
|
|
<b>IDL Definition</b> </dt>
|
|
<dd>
|
|
<div class="idl-code">
|
|
<pre>
|
|
interface SVGLocatable
|
|
{
|
|
SVGMatrix getScreenCTM();
|
|
SVGPerspective getScreenPerspective();
|
|
};
|
|
</pre>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
</dd>
|
|
<dt><b>Methods</b></dt>
|
|
<dd>
|
|
<dl>
|
|
<dt><span class="dom-method-name">getScreenCTM</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">getScreenPerspective</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
<h3 id="TraitAccess">
|
|
7.5. Interface <span class="DOMInterfaceName">TraitAccess</span>
|
|
</h3>
|
|
<p>
|
|
</p>
|
|
<dl>
|
|
<dt>
|
|
<br />
|
|
<br />
|
|
<b>IDL Definition</b> </dt>
|
|
<dd>
|
|
<div class="idl-code">
|
|
<pre>
|
|
interface TraitAccess
|
|
{
|
|
SVGMatrix getMatrixTrait(in DOMString name)
|
|
raises(DOMException);
|
|
SVGMatrix getMatrixPresentationTrait(in DOMString name)
|
|
raises(DOMException);
|
|
void setMatrixTrait(in DOMString name, in SVGMatrix matrix)
|
|
raises(DOMException);
|
|
};
|
|
</pre>
|
|
</div>
|
|
<br />
|
|
<br />
|
|
</dd>
|
|
<dt><b>Methods</b></dt>
|
|
<dd>
|
|
<dl>
|
|
<dt><span class="dom-method-name">getMatrixTrait</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">getMatrixPresentationTrait</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
<dt><span class="dom-method-name">setMatrixTrait</span> </dt>
|
|
<dd>
|
|
</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<div id="sec-refs" class="section">
|
|
<h2 id="refs">8. References</h2>
|
|
<h3 id="normrefs">8.1. Normative References</h3>
|
|
<dl>
|
|
<dt id="ref-NVDL"><strong class="normref">[NVDL]</strong></dt>
|
|
<dd>
|
|
<strong>Document Schema Definition Languages (DSDL) — Part 4: Namespace-based Validation
|
|
Dispatching Language — NVDL. ISO/IEC FCD 19757-4</strong>, See <a href="http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/">
|
|
http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/</a></dd>
|
|
<dt id="ref-RNG"><strong class="normref">[RelaxNG]</strong></dt>
|
|
<dd>
|
|
<strong>Document Schema Definition Languages (DSDL) — Part 2: Regular grammar- based
|
|
validation — RELAX NG. ISO/IEC FDIS 19757-2:2002(E)</strong>, J. Clark, <span class="ruby">
|
|
<span lang="ja" xml:lang="ja" class="rb">村田 真</span> <span class="rp">(</span><span
|
|
class="rt"><span class="familyname">Murata</span> M.</span><span class="rp">)</span></span>,
|
|
eds., 12 December 2002. See <a href="http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf">
|
|
http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf</a></dd>
|
|
<dt id="ref-Schema2"><strong class="normref">[Schema2]</strong></dt>
|
|
<dd>
|
|
<strong>XML Schema Part 2: Datatypes Second Edition</strong>, P. Biron, A. Malhotra,
|
|
eds. W3C, 28 October 2004 (Recommendation). Latest version available at <a href="http://www.w3.org/TR/xmlschema-2/">
|
|
http://www.w3.org/TR/xmlschema-2/</a>. See also <a href="http://www.w3.org/TR/2005/NOTE-xml11schema10-20050511/">
|
|
Processing XML 1.1 documents with XML Schema 1.0 processors</a>.
|
|
</dd>
|
|
<dt id="ref-svgT12"><strong class="normref">[SVGT12]</strong></dt>
|
|
<dd>
|
|
<strong>Scalable Vector Graphics (SVG) Tiny 1.2 Specification</strong>, 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, editors.
|
|
W3C, 22 December 2008 (Recommendation). See <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/">
|
|
http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/</a>
|
|
</dd>
|
|
</dl>
|
|
<h3 id="informrefs">8.2. Informative References</h3>
|
|
<dl>
|
|
<dt id="ref-svgXformsReq"><strong class="informref">[SVGTransformsReqs]</strong></dt>
|
|
<dd>
|
|
<strong>SVG Transforms Requirements</strong>, Jun Fujisawa, Anthony Grasso, Canon Inc., (Working Draft).
|
|
See <a href="http://dev.w3.org/SVG/modules/transforms/SVGTransformsReqs.html">http://dev.w3.org/SVG/modules/transforms/SVGTransformsReqs.html</a>
|
|
</dd>
|
|
<dt id="ref-openVG"><strong class="informref">[OpenVG11]</strong></dt>
|
|
<dd>
|
|
<strong>OpenVG 1.1 Specification</strong>, Daniel Rice, Google Inc.
|
|
See <a href="http://www.khronos.org/registry/vg/specs/openvg_1_0_1.pdf">http://www.khronos.org/registry/vg/specs/openvg_1_0_1.pdf</a>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<div id="acknowledgements" class="section">
|
|
<h2>9. Acknowledgements</h2>
|
|
<p>
|
|
The members of the SVG Working Group who contributed to this document
|
|
include:
|
|
</p>
|
|
<ul>
|
|
<li>Anthony Grasso, Canon Inc.</li>
|
|
<li>Jun Fujisawa, Canon Inc.</li>
|
|
<li><a href="http://mcc.id.au/">Cameron McCormack</a>, Invited Expert (<em>Working Group Co-Chair</em>)</li>
|
|
<li><a href="http://www.w3.org/People/Schepers/">Doug Schepers</a>, W3C (<em>W3C Team Contact</em>)</li>
|
|
</ul>
|
|
<p>
|
|
The editor would also like to thank the following people for contributing
|
|
to this document: Shinya Takeichi, Richard Ling, Dean Jackson, Zack Rusin.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|