Why doesn't code work in IE and Firefox? http://codepen.io/anon/pen/JKEvzZ

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .over-ring { width: 160px; height: 160px; border-radius: 50%; background-color: transparent; border: 13px solid #dfe8ed; position: relative; display: inline-block; } .over-image { display: inline-block; stroke: #30bae7; stroke-width: 13px; width: 640px; height: 640px; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); stroke-dasharray: 465; stroke-dashoffset: 49; fill: transparent; animation: circus 3.7s ease; position: absolute; top: -423px; left: -83px; } #bar { r: 73.5; cx: 150; cy: 150; } @keyframes circus { 0% { stroke-dashoffset: 465 } 100% { stroke-dashoffset: 49 } } 
 <div class="circle-diagramma"> <div class="over-ring"> <svg id="svg" class="over-image"> <circle id="bar"></circle> </svg> </div> </div>

Closed due to the fact that off-topic participants Streletz , cheops , user194374, aleksandr barakin , Suvitruf ♦ Jul 1 '16 at 9:37 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Streletz, cheops, Community spirit, aleksandr barakin, Suvitruf
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • And why should he work? - Alexey Ten

1 answer 1

Delete this:

 #bar { r: 73.5; cx: 150; cy: 150; }

Transfer these attributes here:

 <circle cx="150" cy="150" r="73.5"></circle>

After that, FireFox will work, IE will not work for you, because IE does not support CSS animation for SVG elements, only Edge