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 0 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”

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

    Sign in