W3C home > Mailing lists > Public > www-svg@w3.org > November 2020

"transform" applied to <svg> element in SVG 2

From: Stephan Mühlstrasser <stm@pdflib.com>
Date: Thu, 12 Nov 2020 10:39:57 +0100
To: www-svg@w3.org
Message-ID: <0026bd25-eea5-6c3b-2ebd-1fa50334f43d@pdflib.com>
Hi,

I'm trying to understand the meaning of the "transform" attribute when 
it is applied to the top-level <svg> element in SVG 2.

Consider the following two SVG 2 files:

------------- SVG 2 file A ---------------
<?xml version="1.0"?>
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
         <animateTransform attributeName="transform" attributeType="XML" 
type="rotate" from="0" to="45" dur="5s"
                 repeatCount="indefinite" />
         <rect x="50" y="75" width="100" height="50" fill="black" />
         <rect width="200" height="200" fill-opacity="0" stroke="black" 
stroke-width="5" />
</svg>
------------- SVG 2 file A ---------------


------------- SVG 2 file B ---------------
<?xml version="1.0"?>
<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
         <g>
                 <animateTransform attributeName="transform" 
attributeType="XML" type="rotate" from="0" to="45" dur="5s"
                         repeatCount="indefinite" />
                 <rect x="50" y="75" width="100" height="50" fill="black" />
                 <rect width="200" height="200" fill-opacity="0" 
stroke="black" stroke-width="5" />
         </g>
</svg>
------------- SVG 2 file B ---------------

"SVG 2 file A" animates a rotation of the <svg> element through the 
"transform" attribute. "SVG 2 file B" rotates the two <rect> elements 
through the "transform" attribute by putting them into a <g> element.

When I view these two files with current versions of Chrome and Firefox 
I see the following effect:

- For "SVG 2 file A" the image rotates around the center of the 200x200 
image.

- For "SVG 2 file B" the image rotates about the upper left corner.

While the rendering for "SVG 2 file B" is expected to me, the rendering 
for "SVG 2 file A" is not. I could see the same difference when I 
experimented with the "scale" value in the "transform" attribute.

Are the browsers correct to use the center of the image as origin for 
rotation and scaling for case "A"? If the browsers are correct, where is 
this defined in the SVG 2 specification?

I read https://www.w3.org/TR/SVG2/coords.html#TransformProperty "8.5. 
The ‘transform’ property" and 
https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute "8.6. The 
‘viewBox’ attribute", but I could not understand how it would explain 
the behavior I'm seeing.

--
Stephan
Received on Thursday, 12 November 2020 09:40:13 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 12 November 2020 09:40:13 UTC