You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-transforms-1/Overview.bs
+7-7
Original file line number
Diff line number
Diff line change
@@ -357,9 +357,9 @@ versus
357
357
</code></pre>
358
358
</div>
359
359
360
-
<a href="https://www.w3.org/TR/css3-background/#fixed0">Fixed backgrounds</a> on the root element are affected by any transform specified for that element. For all other elements that are effected by a transform (i.e. have a transform applied to them, or to any of their ancestor elements), a value of ''fixed'' for the 'background-attachment' property is treated as if it had a value of ''background-attachment/scroll''. The computed value of 'background-attachment' is not affected.
360
+
<a href="https://www.w3.org/TR/css-backgrounds-3/#valdef-background-attachment-fixed">Fixed backgrounds</a> on the root element are affected by any transform specified for that element. For all other elements that are effected by a transform (i.e. have a transform applied to them, or to any of their ancestor elements), a value of ''fixed'' for the 'background-attachment' property is treated as if it had a value of ''background-attachment/scroll''. The computed value of 'background-attachment' is not affected.
361
361
362
-
Note: If the root element is transformed, the transformation applies to the entire canvas, including any background specified for the root element. Since <a href="https://www.w3.org/TR/css3-background/#special-backgrounds">the background painting area for the root element</a> is the entire canvas, which is infinite, the transformation might cause parts of the background that were originally off-screen to appear. For example, if the root element's background were repeating dots, and a transformation of ''scale(0.5)'' were specified on the root element, the dots would shrink to half their size, but there will be twice as many, so they still cover the whole viewport.
362
+
Note: If the root element is transformed, the transformation applies to the entire canvas, including any background specified for the root element. Since <a href="https://www.w3.org/TR/css-backgrounds-3/#special-backgrounds">the background painting area for the root element</a> is the entire canvas, which is infinite, the transformation might cause parts of the background that were originally off-screen to appear. For example, if the root element's background were repeating dots, and a transformation of ''scale(0.5)'' were specified on the root element, the dots would shrink to half their size, but there will be twice as many, so they still cover the whole viewport.
363
363
364
364
365
365
The 'transform' Property {#transform-property}
@@ -505,7 +505,7 @@ The 'transform-origin' CSS property is also a <a>presentation attribute</a> and
505
505
506
506
SVG 2 defines the <a element-attr for>transform</a>, <{pattern/patternTransform}>, <{linearGradient/gradientTransform}> attributes as <a>presentation attributes</a>, represented by the CSS 'transform' property [[!SVG2]].
507
507
508
-
The participation in the CSS cascade is determined by the specificity of <a>presentation attributes</a> in the SVG specification. According to SVG, user agents conceptually insert a <a href="https://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes">new author style sheet</a> for presentation attributes, which is the first in the author style sheet collection [[!SVG2]].
508
+
The participation in the CSS cascade is determined by the specificity of <a>presentation attributes</a> in the SVG specification. According to SVG, user agents conceptually insert a <a href="https://www.w3.org/TR/SVG/styling.html#PresentationAttributes">new author style sheet</a> for presentation attributes, which is the first in the author style sheet collection [[!SVG2]].
509
509
510
510
<div class="example">
511
511
This example shows the combination of the 'transform' style property and the <a element-attr for>transform</a> attribute.
@@ -833,7 +833,7 @@ SVG transform functions of the <a element-attr for>transform</a>, <{pattern/patt
833
833
834
834
The SVG transform function <a href="#svg-rotate">rotate</a> with 3 values can not be mapped to a corresponding CSS <<transform-function>>. The 2 optional number values represent a horizontal translation value ''cx'' followed by a vertical translation value ''cy''. Both number values get interpreted as CSS <<length>> types with ''px'' units and define the origin for rotation. The behavior is equivalent to an initial translation by ''cx'', ''cy'', a rotation defined by the first number value interpreted as <<angle>> type with ''deg'' unit followed by a translation by ''-cx'', ''-cy''.
835
835
836
-
A <a element-attr for>transform</a> attribute can be the start or end value of a CSS Transition. If the value of a <a element-attr for>transform</a> attribute is the start or end value of a CSS Transition and the SVG <a href="svg-transform-list">transform list</a> contains at least one <a href="#svg-rotate">rotate</a> transform function with 3 values, the individual SVG transform functions must get <a>post-multiplied</a> and the resulting matrix must get mapped to a <<matrix()>> CSS <<transform-function>> and used as start/end value of the CSS Transition.
836
+
A <a element-attr for>transform</a> attribute can be the start or end value of a CSS Transition. If the value of a <a element-attr for>transform</a> attribute is the start or end value of a CSS Transition and the SVG <a href="#svg-transform-list">transform list</a> contains at least one <a href="#svg-rotate">rotate</a> transform function with 3 values, the individual SVG transform functions must get <a>post-multiplied</a> and the resulting matrix must get mapped to a <<matrix()>> CSS <<transform-function>> and used as start/end value of the CSS Transition.
837
837
838
838
User coordinate space {#svg-user-coordinate-space}
@@ -898,7 +898,7 @@ The animation effect is <a>post-multiplied</a> to the underlying value for addit
898
898
899
899
The value "paced" is undefined for the attribute <{animate/calcMode}> on <{animate}> for animations of the data type <<transform-list>>. If specified, UAs may choose the value "linear" instead. Future versions of this specification may define how paced animations can be performed on <<transform-list>>.
900
900
901
-
Note: The following paragraphs extend <a href="https://www.w3.org/TR/SVG/animate.html#complexDistances">Elements, attributes and properties that can be animated</a>[[SVG11]].
901
+
Note: The following paragraphs extend <a href="https://www.w3.org/TR/SVG11/animate.html#complexDistances">Elements, attributes and properties that can be animated</a>[[SVG11]].
902
902
903
903
The introduced presentation attributes <a element-attr for>transform</a>, <{pattern/patternTransform}>, <{linearGradient/gradientTransform}> and 'transform-origin' are animatable.
904
904
@@ -951,10 +951,10 @@ The neutral element for addition when performing a <var>by</var> animation with
951
951
952
952
</div>
953
953
954
-
The SVG '<a href="https://www.w3.org/TR/SVG/animate.html#TargetAttributes">attributeName</a>' attribute {#svg-attribute-name}
954
+
The SVG 1.1 '<a href="https://www.w3.org/TR/SVG11/animate.html#TargetAttributes">attributeName</a>' attribute {#svg-attribute-name}
<a href="https://www.w3.org/TR/SVG/animate.html">SVG 1.1 Animation</a> defines the "<a href="https://www.w3.org/TR/SVG/animate.html#TargetAttributes">attributeName</a>" attribute to specify the name of the target attribute. For the presentation attributes <{linearGradient/gradientTransform}> and <{pattern/patternTransform}> it will also be possible to use the value 'transform'. The same 'transform' property will get animated.
957
+
<a href="https://www.w3.org/TR/SVG11/animate.html">SVG 1.1 Animation</a> defines the "<a href="https://www.w3.org/TR/SVG11/animate.html#TargetAttributes">attributeName</a>" attribute to specify the name of the target attribute. For the presentation attributes <{linearGradient/gradientTransform}> and <{pattern/patternTransform}> it will also be possible to use the value 'transform'. The same 'transform' property will get animated.
0 commit comments