CSS style transform vs svg transform

Question

I thought a big part of SVG was the scalable factor. I know how to use SVG very well to scale and be responsive in many different ways. Usually one can set the viewbox on an SVG element and a coordinate system will be created based on the pixels of the screen. Therefore all transforms, translate, rotate, skew etc will be relative to the svg's own coordinate system. I thought this was supposed to be an advantage over using css animations when it came to translating etc, because you had to use units of measurements such as pixels, which I assumed would then result in improper translations on screens of various resolutions, or resizing of a browser window.

Can some one explain to me, why then the following css animation actually results in the same position of the elements regardless of whether i resize the window prior to the animation, or use a different screen resolution?

Javascript

var g= document.getElementById("testingG");
g.setAttribute("style", "transform: translate("+dockingPoint[0]+"px, "+dockingPoint[1]+"px)");

CSS

#testingG {
    transition: 1s ease-in;
}

HTML

<svg viewBox="0 0 1409 78.875" >
    <g id="testingG"style="transform: translate(1375px, 40px)">
        <circle r="10" cy="0" cx="0" style="fill: rgb(151, 215, 241);"></circle>
        <text  transform="translate(-170, 27)">Testing</text>
    </g>

Note that I set inline css for the g element which will ensure that a transition triggers when i modify the style with my javascript.

I assumed that at different resolutions, this g element would end up in different locations.

Is the svg element somehow in the background ignoring the fact that i'm translating via css and still scaling those pixel dimensions to accord for the viewbox i've set?

That's the only thing I can think of, and if that's the case I'd appreciate a link to some documentation :)

Answer 1

... measurements such as pixels, which I assumed would then result in improper translations on screens of various resolutions, or resizing of a browser window.

That's wrong assumption.

CSS pixels are not screen pixels. px in CSS is a logical length unit that equals to 1/96 of inch rounded to nearest integer (to have reasonable rendering of 1px border).

So "SVG canvas units" (like in translate(-170, 27)) and CSS length units are essentially the same - something virtual.

To make this even worse 1 inch in CSS has also no strict meaning - it is far from being 1 inch measured on screen surface.

Reference: https://www.w3.org/TR/css3-values/#absolute-lengths

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

:)