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 3 people

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!

    • @Bogdan B. What’s the word on this issue? We still need CSS transform on SVG elements, and it’s been 3.5 years since this bug was reported.

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

    Sign in