The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS what does transform-box:view-box do? CSS3 SVG

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #275064

    I read this article

    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?


    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.

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.