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

External Issue #1173754


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

Sign in to watch or report this issue.

Steps to reproduce


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:
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:



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?

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

    Sign in