1818 < div id ="div-head " class ="head ">
1919 <!--logo-->
2020
21- < h1 > CSS Transforms</ h1 >
21+ < h1 > CSS Transforms Level 1 </ h1 >
2222
2323 < h2 class ="no-num no-toc "> [LONGSTATUS] [DATE]</ h2 >
2424 < dl >
@@ -162,7 +162,7 @@ <h2 id="css-values">CSS Values</h2>
162162 < p > In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the < a href ="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit "> inherit</ a > keyword as their property value. For readability it has not been repeated explicitly.
163163
164164
165- < h2 id ="definitions "> Definitions </ h2 >
165+ < h2 id ="definitions "> Terminology </ h2 >
166166 < p > When used in this specification, terms have the meanings assigned in
167167 this section.
168168 </ p >
@@ -207,7 +207,7 @@ <h2 id="definitions">Definitions</h2>
207207 </ li >
208208 </ ul >
209209 </ dd >
210-
210+ < dt id =" TermUserCoordinateSystem " > < dfn > user coordinate system </ dfn > </ dt >
211211 < dt id ="TermLocalCoordinateSystem "> < dfn > local coordinate system</ dfn > </ dt >
212212 < dd >
213213 < p >
@@ -218,12 +218,6 @@ <h2 id="definitions">Definitions</h2>
218218 canvas.
219219 </ p >
220220 </ dd >
221- < dt id ="TermUserCoordinateSystem "> < dfn > user coordinate system</ dfn > </ dt >
222- < dd >
223- < p >
224- See definition of < span class ="term "> local coordinate system</ span > .
225- </ p >
226- </ dd >
227221 < dt id ="TermPerspectiveMatrix "> < dfn > perspective matrix</ dfn > </ dt >
228222 < dd >
229223 < p >
@@ -1790,12 +1784,11 @@ <h2 id="svg-transform">
17901784 < p >
17911785 The < a href ="http://www.w3.org/TR/2011/REC-SVG11-20110816/ "> SVG 1.1
17921786 specification</ a > did not specify the attributes 'transform', 'gradientTransform'
1793- or 'patternTransform' as < a
1794- href ="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#UsingPresentationAttributes "> < em > presentation
1795- attributes</ em > </ a > . In order to improve the integration of SVG and HTML, this
1796- specification makes these SVG attributes 'presentation attributes' and makes the
1797- 'transform' property one that applies to < span class ="term "> transformable
1798- elements</ span > in the SVG namespace.
1787+ or 'patternTransform' as < a > presentation attributes</ a > . In order to improve the
1788+ integration of SVG and HTML, this
1789+ specification makes these SVG attributes presentation attributes and makes the
1790+ 'transform' property one that applies to < var > transformable
1791+ elements</ var > in the SVG namespace.
17991792 </ p >
18001793
18011794 < p >
@@ -1990,48 +1983,45 @@ <h3 id="svg-three-dimensional-functions">SVG and 3D transform functions</h3>
19901983
19911984 < p >
19921985 This specification explicitly requires three-dimensional transform functions to
1993- apply to the < a
1994- href ="http://www.w3.org/TR/SVG/intro.html#TermContainerElement "> < em > container
1995- elements</ em > </ a > : 'a', 'g', 'svg', all < a
1996- href ="http://www.w3.org/TR/SVG/intro.html#TermGraphicsElement "> < em > graphics
1997- elements</ em > </ a > , all < a
1998- href ="http://www.w3.org/TR/SVG/intro.html#TermGraphicsReferencingElement "> < em > graphics
1999- referencing elements</ em > </ a > and the SVG '< a
2000- href ="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElement "> foreignObject</ a > '
2001- element.
1986+ apply to the < a > container elements</ a > : < a > 'a element'</ a > , < a > 'g element'</ a > ,
1987+ < a > 'svg element'</ a > , all < a > graphics elements</ a > , all < a > graphics referencing elements</ a >
1988+ and the SVG < a > 'foreignObject element'</ a > element.
20021989 </ p >
20031990
20041991 < p >
20051992 Three-dimensional transform functions and the properties 'perspective',
20061993 'perspective-origin', 'transform-style' and 'backface-visibility' can not be used
2007- for the elements: 'clipPath', 'linearGradient', 'radialGradient' and
2008- 'pattern'. If a transform list includes a three-dimensional transform function, the
1994+ for the elements: < a > 'clipPath element'</ a > , < a > 'linearGradient element'</ a > ,
1995+ < a > 'radialGradient element'</ a > and < a > 'pattern element'</ a > . If a transform list
1996+ includes a three-dimensional transform function, the
20091997 complete transform list must be ignored. The values of every previously named
2010- property must be ignored. < span class =" term " > Transformable elements</ span > that are
1998+ property must be ignored. < var > Transformable elements</ var > that are
20111999 contained by one of these elements can have three-dimensional transform functions.
2012- Before a 'clipPath', 'mask' or 'pattern' element can get applied to a target
2000+ Before a < a > 'clipPath element'</ a > , < a > 'mask element'</ a > or < a > 'pattern element'</ a >
2001+ element can get applied to a target
20132002 element, user agents must take the drawn results as static images in analogue of
20142003 "flattening" the elements and taking the rendered content as a two-dimensional
20152004 canvas.
20162005 </ p >
20172006
20182007 < p >
20192008 If the 'vector-effect' property is set to ''non-scaling-stroke'' and an object is
2020- within a < span class =" term " > 3D rendering context</ span >
2021- the property has no affect on stroking the object.
2009+ within a < var > 3D rendering context</ var > the property has no affect on stroking the
2010+ object.
20222011 </ p >
20232012
20242013 < h3 id ="svg-user-coordinate-space ">
20252014 User coordinate space
20262015 </ h3 >
20272016
20282017 < p >
2029- For the 'pattern', 'linearGradient', 'radialGradient' and 'clipPath'
2018+ For the < a > 'pattern element'</ a > , < a > 'linearGradient element'</ a > ,
2019+ < a > 'radialGradient element'</ a > and < a > 'clipPath element'</ a >
20302020 elements the 'transform', 'patternTransform', 'gradientTransform' presentation
20312021 attributes represents values in the current user coordinate system in place at the
20322022 time when these elements are referenced (i.e., the user coordinate system for the
20332023 element referencing the 'pattern' element via a 'fill' or 'stroke' property).
2034- Percentage values are relative to the < span > bounding box</ span > of the
2024+ Percentage values are relative to the < var > bounding box</ var > of the
20352025 referencing element.
20362026 </ p >
20372027
@@ -2041,7 +2031,7 @@ <h3 id="svg-user-coordinate-space">
20412031 </ p >
20422032
20432033 < p >
2044- For all other < span class =" term " > transformable elements</ span > the
2034+ For all other < var > transformable elements</ var > the
20452035 'transform' presentation attribute represents values in the current user coordinate
20462036 system of the parent. All percentage values of the 'transform' presentation
20472037 attribute are relative to the element's < var > bounding box</ var > .
@@ -2072,11 +2062,11 @@ <h3 id="svg-user-coordinate-space">
20722062</svg></ pre >
20732063
20742064 < p >
2075- An SVG 'pattern' element doesn't have a bounding box. The < var > bounding box </ var >
2076- of the referencing 'rect' element is used
2065+ An SVG < a > 'pattern element' </ a > element doesn't have a bounding box. The
2066+ < var > bounding box </ var > of the referencing < a > 'rect element' </ a > element is used
20772067 instead to solve the relative values of the 'transform-origin' property. Therefore
20782068 the point of origin will get translated by 100 pixels temporarily to rotate the
2079- user space of the 'pattern' elements content.
2069+ user space of the < a > 'pattern element' </ a > elements content.
20802070 </ p >
20812071 </ div >
20822072
@@ -2135,17 +2125,18 @@ <h2 id="svg-animation">
21352125 </ h2 >
21362126
21372127 < h3 id ="svg-animate-element ">
2138- The 'animate' and 'set' element
2128+ The < a > 'animate element' </ a > and < a > 'set element' </ a > element
21392129 </ h3 >
21402130
21412131 < p >
2142- With this specification, the 'animate' element and the 'set' element can animate
2132+ With this specification, the < a > 'animate element'</ a > element and the
2133+ < a > 'set element'</ a > element can animate
21432134 the data type < var > <transform-list></ var > .
21442135 </ p >
21452136
21462137 < p >
2147- The animation effect is post-multiplied to the underlying
2148- value for additive 'animate' animations (see below) instead of added to the
2138+ The animation effect is post-multiplied to the underlying value for additive
2139+ < a > 'animate element' </ a > animations (see below) instead of added to the
21492140 underlying value, due to the specific behavior of < var > <transform-list></ var >
21502141 animations.
21512142 </ p >
@@ -2158,24 +2149,25 @@ <h3 id="svg-animate-element">
21582149 </ p >
21592150
21602151 < p >
2161- < var > To</ var > animations on 'animate' provide specific functionality to get a smooth
2162- change from the underlying value to the 'to' attribute value, which conflicts
2163- mathematically with the requirement for additive transform animations to be
2152+ < var > To</ var > animations on < a > 'animate element' </ a > provide specific functionality
2153+ to get a smooth change from the underlying value to the 'to' attribute value, which
2154+ conflicts mathematically with the requirement for additive transform animations to be
21642155 post-multiplied. As a consequence, the behavior of < var > to</ var > animations for
2165- 'animate' is undefined. Authors are suggested to use < var > from-to</ var > ,
2156+ < a > 'animate element' </ a > is undefined. Authors are suggested to use < var > from-to</ var > ,
21662157 < var > from-by</ var > , < var > by</ var > or < var > values</ var > animations to achieve any
21672158 desired transform animation.
21682159 </ p >
21692160
21702161 < p >
2171- The value 'paced' is undefined for the attribute 'calcMode' on 'animate' for animations of the
2162+ The value 'paced' is undefined for the attribute 'calcMode' on < a > 'animate element'</ a >
2163+ for animations of the
21722164 data type < var > <transform-list></ var > . If specified,
21732165 UAs may choose the value 'linear' instead. Future versions of this specification
21742166 may define how paced animations can be performed on
21752167 < var > <transform-list></ var > .
21762168 </ p >
21772169
2178- < p class ="note "> The following paragraphs extend < a
2170+ < p class ="note "> Note: The following paragraphs extend < a
21792171 href ="http://www.w3.org/TR/SVG/animate.html#complexDistances "> Elements, attributes
21802172 and properties that can be animated</ a > [[SVG11]].
21812173 </ p >
@@ -2190,9 +2182,8 @@ <h3 id="svg-animate-element">
21902182 With this specification the SVG basic data type < var > <transform-list></ var > is
21912183 equivalent to a list of < var > <transform-function></ var > s.
21922184 < var > <transform-list></ var > is animatable and additive. The data type can be
2193- animated using the SVG '< a
2194- href ="http://www.w3.org/TR/SVG/animate.html#AnimateElement "> animate</ a > ' element and
2195- the SVG '< a href ="http://www.w3.org/TR/SVG/animate.html#SetElement "> set</ a > '
2185+ animated using the SVG < a > 'animate element'</ a > element and
2186+ the SVG < a > 'set element'</ a >
21962187 element. SVG animations must run the same animation steps as described in section < a
21972188 href ="#animation "> Transitions and Animations between Transform Values</ a > .
21982189 </ p >
@@ -2208,10 +2199,10 @@ <h3 id="svg-animate-element">
22082199 < tr >
22092200 < th > Data type</ th >
22102201 < th > Additive?</ th >
2211- < th > 'animate' </ th >
2212- < th > 'set' </ th >
2213- < th > 'animateColor' </ th >
2214- < th > 'animateTransform'</ th >
2202+ < th > < a > 'animate element' </ a > </ th >
2203+ < th > < a > 'set element' </ a > </ th >
2204+ < th > < a > 'animateColor element' </ a > </ th >
2205+ < th > < a > 'animateTransform'</ a > </ th >
22152206 < th > Notes</ th >
22162207 </ tr >
22172208 </ thead >
@@ -2223,7 +2214,7 @@ <h3 id="svg-animate-element">
22232214 < td > yes</ td >
22242215 < td > no</ td >
22252216 < td > yes</ td >
2226- < td > Additive for 'animateTransform' means that a transformation is post-multiplied to the base set of
2217+ < td > Additive for < a > 'animateTransform element' </ a > means that a transformation is post-multiplied to the base set of
22272218 transformations.</ td >
22282219 </ tr >
22292220 < tr >
0 commit comments