[css3-transforms] Supporting 'transform' on 'svg' element

Hi SVG WG and FX TF,

The SVG WG has a resolution to support the 'transform' attribute on the SVGSVGElement and it is in the current planning phase [1][2][3]. That would mean that the element turns from a SVGLocatable element to a SVGTransformable element and needs to be updated in the specification as well.

The question is how the 'transform' attribute works in combination with the 'viewBox' attribute, 'preserveAspectRatio', 'x', 'y', 'width' and 'height'.

For 'viewBox' the SVG specification says the following:

"a ‘viewBox’ does not affect the ‘x’, ‘y’, ‘width’ and ‘height’ attributes (or in the case of the‘marker’ element, the ‘markerWidth’ and ‘markerHeight’ attributes) on the element with the ‘viewBox’ attribute." [4]

For 'preserveAspectRatio' the SVG specification says:

"‘preserveAspectRatio’ only applies when a value has been provided for ‘viewBox’ on the same element. For these elements, if attribute ‘viewBox’ is not provided, then ‘preserveAspectRatio’ is ignored." [5]

Therefore 'preserveAspectRatio' depends on 'viewBox'.

For 'x', 'y', 'width', 'height':

"The bounds of the new viewport are defined by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes on the element establishing the new viewport, such as an ‘svg’ element." [6]

For 'transform':

"The ‘transform’ attribute is applied to an element before processing any other coordinate or length values supplied for that element. In the element

<rect x="10" y="10" width="20" height="20" transform="scale(2)"/>

the x, y, width and height values are processed after the current coordinate system has been scaled uniformly by a factor of 2 by the ‘transform’ attribute. Attributes x, y, width and height (and any other attributes or properties) are treated as values in the new user coordinate system, not the previous user coordinate system. Thus, the above ‘rect’ element is functionally equivalent to:

<g transform="scale(2)">
  <rect x="10" y="10" width="20" height="20"/>
</g>" [7]

'x', 'y', 'width' and 'height' might not necessarily have the same meaning on a 'svg' element, since they establish the new viewport here. Nevertheless, I would like to use the same definition on the attributes of the 'svg' element.

That means that if all attributes are applied to the 'svg' element, the following execution order should take affect:

First transform the user coordinate space in which the 'svg' element is applied. Use the 'x', 'y', 'width' and 'height' attributes to establish a new viewport in the transformed coordinate space and apply 'viewBox' and 'preserveAspectRatio' afterwards (concerns also on [1]). This is the current behavior on inline SVG documents in HTML5:

<div>
  <svg style="transform: scale(2)" x="10" y="10" width="100" height="100" viewBox="0 0 100 100">
    <!-- SVG content goes here. -->
  </svg>
</div>

Like described before, this needs at least the change to the SVGTransformable element in the SVG specification. Do we also need to explicitly specify the behavior on all attributes for the 'svg' element?

The current specification of CSS3 Transforms [8] already allows the use of 'transform' on 'svg' elements. Regarding the long iteration times on new versions of specifications, I would like to keep it there. We need to clarify which changes are necessary on CSS3 Transforms and which changes need to go into SVG. I would rather keep the details in the SVG specification.

Greetings,
Dirk

[1] http://www.w3.org/Graphics/SVG/WG/track/issues/2252
[2] http://www.w3.org/2011/10/28-svg-irc#T00-23-44
[3] http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Requirements_Mailing_List_Feedback#Consider_adding_transform.3D.22.22_to_.3Csvg.3E
[4] http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute (last paragraph)
[5] http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute (3rd paragraph)
[6] http://www.w3.org/TR/SVG/coords.html#EstablishingANewViewport (2nd paragraph)
[7] http://www.w3.org/TR/SVG/coords.html#TransformAttribute
[8] http://dev.w3.org/csswg/css3-transforms/#svg-three-dimensional-functions

Received on Sunday, 15 April 2012 15:13:30 UTC