what does transform-box:view-box do? CSS3 SVG

[oehqoehfo]

I read this article
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box

and it says transform-box:view-box so

The nearest SVG viewport is used as the reference box. If a viewBox attribute is specified for the SVG viewport creating element, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute, and the dimension of the reference box is set to the width and height values of the viewBox attribute.

I didn’t understand it quite because I am not perfect in english.
Does it mean if I use transform-box: view-box on for example

<

div> tag, css will find the nearest svg and apply divs transform-box value as svg’s viewBox value?

[Pogany]

Hi oehqoehfo
This may not be the answer you are waiting for, but in this pen I try explain what I am using transform-box: fill-box for.

Please try commenting out the line 17 in the CSS.
Do it in several browsers.

https://codepen.io/giaco/pen/OwowJQ

I’ve set transform-origin:50% 50%;for the #box element, which means that the box should rotate around it’s center. However in some browsers the box take the center of the SVG canvas as the origin of the transformation. To fix this problem I add transform-box: fill-box;. Now “The object bounding box is used as the reference box.”

The JavaScript is used to check the value for transform-box in different browsers.

[Author]

Posts