CSS transition property not working for SVG elements

Issue #650529

Details

Created
Jul 28, 2014
Privacy
This issue is public.
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Uhttp://jsfiddle.net/m1v6f2pg/](http://jsfiddle.[http://jsfiddle.net/m1v6f2pg/](http://jsfiddle.net/m1v6f2pg/)

 

Repro Steps:

==============

Create a file with the following content. Only the bottom div element will have working CSS transition.

<!doctype html>

<html>

<head>

<title>SVG + CSS transition derp</title>

<style>

polygon {

fill: #888;

transition: fill 0.5s ease-out;

}

polygon:hover {

fill: #800;

}

div {

background-color: #888;

transition: background-color 0.5s ease-out;

}

div:hover {

background-color: #800;

}

</style>

</head>

<body>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="height: 60px;">

<polygon points="0,0, 0,50, 100,50, 100,0" />

</svg>

<div style="width: 100px; height: 50px;"></div>

</body>

</html>

Expected Results:

==============

The SVG element should have a its transition property applied like the div.

Actual Results:

==============

Dev Channel specific:

================

Yes

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Tony S.”

      Changed Assigned To from “Tony S.” to “Rico M.”

      Changed Assigned To from “Rico M.” to “Rossen A.”

      Changed Steps to Reproduce

      Changed Assigned To from “Rossen A.” to “IE F.”

      Changed Status

    • Here is the original issue report: https://connect.microsoft.com/IE/feedbackdetail/view/920928/ie-11-css-transition-property-not-working-for-svg-elements

      From the original thread, this jsfiddle make it very obvious when tested on IE11 and Chrome or FF: http://jsfiddle.net/o4trrh06/4/

    • Microsoft Edge Team

      Changed Steps to Reproduce

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

    Sign in