How to show SVG donut chart in IE? - html

Question

I have created a very nicely animated chart that looks like this.
<div>Some percentage</div>
<div class="bigbox">
<div class="centered">
<div class="item t1">
<div class="graphicsContent">51%</div>
<svg width="144px" height="144px" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle1" class="circle_animation" r="56" cy="72" cx="72" stroke-width="16" stroke="blue" fill="none"/>
</g>
<g>
<circle id="innerCircle1" r="44" cy="72" cx="72" stroke-width="2" stroke="#b1b1b1" fill="none"/>
</g>
</svg>
</div>
</div>
</div>
As you can see, I used SVG. It seems to work fine anywhere else but in IE. I read that IE has a lot of issues regarding CSS3 animations. SMIL doesn't seem to solve my problems. And I don't even care if the graphic is completely animated in IE as long as it just shows the whole content.
Should I stay away from SVG if I want to create a cross-browser solution or is there something I should add to achieve the desired (or even partially desired) result in IE? I would appreciate any suggestion.

Answer 1

Dash-arrayoffset animated
**Does not work in IE**, even if the [documentation][1] does say its css animatable
So **[Harry][2]** converted it to use dash-array instead.
I reveresed the prosess with: animation: t1 1s ease-out reverse forwards;
Why would you do that?
Because when an animation fails in IE it goes back to its initial value.
The old initial value was: stroke-dasharray: 351.68;
this is 0% of the circle
The new initial value is: stroke-dasharray: 170.7, 351.68;
and this is about 51% of the circle.
.bigbox {
width: 50%;
}
.item {
position: relative;
}
.graphicsContent {
text-align: center;
position: absolute;
line-height: 144px;
width: 100%;
font-size: 1.250em;
}
svg {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 170.7, 351.68;
}
.t1 .circle_animation {
-webkit-animation: t1 1s ease-out reverse forwards;
animation: t1 1s ease-out reverse forwards;
}
#-webkit-keyframes t1 {
0% {
stroke-dasharray: 170.7, 351.68;
}
100% {
stroke-dasharray: 0, 351.68;
}
}
#keyframes t1 {
0% {
stroke-dasharray: 170.7, 351.68;
}
100% {
stroke-dasharray: 0, 351.68;
}
}
<div>Some percentage</div>
<div class="bigbox">
<div class="centered">
<div class="item t1">
<div class="graphicsContent">51%</div>
<svg width="144px" height="144px" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle1" class="circle_animation" r="56" cy="72" cx="72" stroke-width="16" stroke="blue" fill="none" />
</g>
<g>
<circle id="innerCircle1" r="44" cy="72" cx="72" stroke-width="2" stroke="#b1b1b1" fill="none" />
</g>
</svg>
</div>
</div>
</div>

Answer 2

As you say, 'SMIL doesnt seem to your your problems' - The reason behind this is because IE does not suspport SVG SMIL animation - as you can see here http://caniuse.com/#search=svg%20animation
Would you be happy with the whole chart (i.e. the circle and the blue bar with percentage) being displayed, or just the percentage without the circle?