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

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