UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
Example URL:
https://jsbin.com/wanipiwujo/edit?html,css,output
Steps to reproduce the problem:
1. Apply a translate transform to an SVG element, using % for the translation offset (the red rectangles in the test page)
2. Apply a rotational transform on an SVG element, and also set the transform-origin property using % values (the blue ellipses in the test page)
3. Optionally, set the transform-box property on the element.
What is the expected behavior?
See https://drafts.csswg.org/css-transforms/#propdef-transform-box
Percentages in transformations are relative to the width/height of a reference box. For SVG, this should by default be the view-box (same as most other percentages in SVG). CSS Transforms introduces the transform-box property to allow author control over this behavior.
What went wrong?
Chromium does not support transform-box, and treats all SVG elements as if they had `transform-box: fill-box` for percentages.
Does it occur on multiple sites: Yes
Is it a problem with a plugin? N/A
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 49.0.2623.87 Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 21.0 r0
Firefox has always implemented percentages in CSS Transforms on SVG elements relative to the view-box. The latest Nightly build (48) supports transform-box according to the latest spec.
IE/Edge have not yet implemented CSS transforms on SVG elements, in part because of the lack of interoperability of this feature.
Safari/WebKit I believe have same behavior as Chromium, can't test at the moment.
Comment 1 by jw...@jwatt.org
, Mar 17 2016