I'm adding some SVG Paths to my web page, but am having difficulty with Firefox 43.0. It appears that when I apply transform: scale(0.1) to my path, Firefox does not update the bounding client rectangle (via getBoundingClientRect())
Here's a screenshot of my Path before the transform, and the correct bounding rectangle:
And here it is with the transform applied, with the visual clearly outside the bounding box:
By contrast, here is Chrome updating its bounding box as expected. (Note the constrained proportions.)
This problem isn't present on either Chrome or Edge. I did find this old bug from 2012 which says the problem was fixed in version 12.0, and the documentation states:
Starting from Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), the effect of CSS transforms is considered when computing the element's bounding rectangle.
...which doesn't seem to be true. For the other browsers, I was scaling down my circle to 10% of its original size, then computing the coordinate offset from the client rectangle to center it on its original 100% scale position. However, since the client rectangle isn't updated after the transform in Firefox, it's messing up the calculations.
How do I work around this for Firefox?
1 Answers
Answers 1
Transforms can be set via attributes e.g.
<path transform="scale(0.1)" d="..."/> or CSS as you're doing. Using CSS is the newer way to do it; the SVG 1.1 specification only specifies attribute transforms.
getBoundingClientRect doesn't take CSS transforms into account currently on Firefox but it does take transform attributes into account.
0 comments:
Post a Comment