CSS transforms (+ feature detection) not working on SVG elements

External Issue #1173754

Details

Created
Dec 5, 2014
Privacy
This issue is public.
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

Set a CSS transform on an SVG element. See this demo http://codepen.io/thebabydino/pen/gbaZVZ

The SVG rectangle:
<rect class=’transf–css’ x=’-400’ y=’-100’ width=’300’ height=’200’/>
has a CSS transform applied:
.transf–css { transform: rotate(30deg); }
This should rotate the rectangle. It doesn’t.

Moreover, when I check the transform property via JS:
getComputedStyle(document.querySelector(‘.transf–css’)).transform
I get the matrix form (matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0)) of the value I have set via CSS (rotate(30deg), because cos(30deg) = .866025 and sin(30deg) = .5), even though the transform wasn’t actually applied on the SVG rectangle element.

Expected Results:

CSS transforms should work on SVG elements.

Actual Results:

Dev Channel specific:

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Kamen M.”

      Changed Assigned To to “Rossen A.”

      Changed Assigned To from “Rossen A.” to “Bogdan B.”

      Changed Status to “Confirmed”

      Changed Assigned To from “Bogdan B.” to “Kevin B.”

      Changed Assigned To from “Kevin B.” to “Bogdan B.”

      Changed Status from “Confirmed”

      Changed Assigned To from “Bogdan B.” to “IE F.”

      Changed Status to “External”

    • It is now Aug 2017, any progress on this 2.5 year old reported bug?

    • It’s been a while, but we focused on this gap this release and I can confirm that on the development build - both CSS transform and getComputedStyle provide expected result. I’m not sure this is available in the Windows Insider preview build yet - and if not it should be available within the next few weeks. Finally I’ll have to mentioned that we’re still polishing CSS animations support for transforms on SVG elements and if things go as planned this should also land this release. Appreciate your patience!

    You need to sign in to your Microsoft account to add a comment.

    Sign in