SVG transform as a stylesheet property (as opposed to CSS transform)

Question

Background:

I am long familar with CSS 2D rotate transforms:

transform: rotate(45deg);

I am much less familiar with SVG 2D rotate transforms:

transform="rotate(45, 0, 0)"

But I do know that

• CSS 2D rotate transforms use the 50%, 50% point of the element as the rotational axis; whereas
• SVG 2D rotate transforms use the x, y co-ordinates supplied in the 2nd and 3rd parameters as the rotational axis

---

Question:

When I put SVGs together I generally try to avoid inline attributes and use CSS rules instead.

I understand from MDN, that:

As of SVG2, transform is a presentation attribute, meaning it can be used as a CSS property. However, be aware that there are some difference in syntax between the CSS property and the attribute. See the documentation for the CSS property transform for the specific syntax to use in that case.

Source: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

I don't know if I am understanding this correctly or not.

• I know I can declare SVG transform as an in-element attribute
• I know I can declare CSS transform as a stylesheet property

But can I declare SVG transform as a stylesheet property in the manner of these SVG-attributes-as-stylesheet-properties:

.badge {

 fill: rgb(255, 0, 0);`
 stroke: rgb(0, 0, 0);`
 stroke-width: 10;
}

ie. something like: transform: rotate(45, 0, 0) ?

Or can I only declare CSS transform as a stylesheet property when describing transforms of SVG elements?

I ask only because the former doesn't appear to be working, and I'm not sure if it's me or Firefox.

Answer 1

Let me explain by way of example the nuances and differences of the transformation of 2D CSS vs SVG. SVG uses absolute coordinates that are calculated from the upper left corner of the SVG canvas.

Where indicate the coordinates of the center of rotation transform="rotate(0 100 100)", then around them the SVG element will rotate

transform="rotate(0 100 100)"
Animation starts after clicking on SVG canvasemphasized text

<style>
#rectGroup {
  fill: crimson;
}
</style>
<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" style="border:1px solid gray;">
<g id="rectGroup">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/> 
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/> 
  
<animateTransform
    attributeName="transform"
	type="rotate"
	begin="svg1.click"
	dur="2s"
	values="0 100 100;360 100 100"
	repeatCount="indefinite"
	/>
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>

<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>

transform="rotate(0 100 75)"

<style>
#rectGroup {
  fill: crimson;
}
</style>
<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" style="border:1px solid gray;">
<g id="rectGroup">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/> 
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/> 
  
<animateTransform
    attributeName="transform"
	type="rotate"
	begin="svg1.click"
	dur="2s"
	values="0 100 75;360 100 75"
	repeatCount="indefinite"
	/>
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>

<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>

In CSS, a block model that uses the coordinates of the center of rotation relative to the parent container This saves us from calculating and specifying coordinates exactly as it is done in SVG, which greatly simplifies the task.
But the main question was whether SVG syntax could be used to place it in CSS rules.
The short answer is no.

But SVG is well integrated with CSS rules.

1. External style sheet The examples below repeat the SVG transformation examples.

Rotation around the center of the parent container

transform: rotate(135deg);
transform-origin: center;

<style>
#rectGroup {
  fill: crimson;
  transform: rotate(135deg);
  transform-origin: center;
}

</style>
<svg width="200" height="200" viewBox="0 0 200 200" style="border:1px solid gray;">
<g id="rectGroup">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/> 
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/>
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>

<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>

2. Styles inside the SVG file

<svg id="svg1" width="200" height="200" viewBox="0 0 200 200" style="border:1px solid gray;">
<style>
#rectGroup {
  fill: crimson;
 transform-origin:center;
}
</style>
<g id="rectGroup" style="transform:rotate(135deg);">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/> 
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/> 
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>

<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>

3. Styles in SVG presentation attributes's

<svg id="svg1" width="400" height="400" viewBox="0 0 200 200" style="border:1px solid gray;">

<g id="rectGroup" style="fill:crimson;transform-origin:center;transform:rotate(135deg);">
<rect width="100px" height="50px" x="50px" y="50px" rx="10"/> 
<circle cx="60px" cy="75px" r="5px" style="fill:gold;"/> 
</g>
<circle cx="100px" cy="75px" r="5px" fill="black"/>
<circle cx="100px" cy="100px" r="5px" fill="yellowgreen"/>

<polyline points="0,75 200,75" stroke="gray" />
<polyline points="100,0 100,200" stroke="gray" />
</svg>