SVG gauge chart is not rendering in IE11

I have Integrated below codepen SVG gauge chart, it is working fine on mozilla and chrome but it is not rendering properly on IE11 version, please find screen shots of chrome and IE11.

HTML:

<div class="gauge-wrap">
									  <div class="gauge"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
										<circle class="circle1" cx="50" cy="50" r="48"></circle>
										<defs>
										  <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
											<stop offset="0%"   stop-color="#f96300" stop-opacity="0.4" />
											<stop offset="100%" stop-color="#f96300" stop-opacity="0.9" />
										  </linearGradient>
										</defs>
										<circle class="circle2" cx="50" cy="50" r="48" stroke="url(#linear)"></circle>
										<circle class="circle3" cx="9" cy="25" r="2" ></circle>
										</svg>
										<h2 class="gauge-header"><i class="fa fa-certificate activeIcon" aria-hidden="true"></i> <span>you've earned <br> a new perk</span></h2>
										<p class="start">$5k</p>
										<p class="finish">$10k</p>
									  </div>
									</div>

CSS:

.gauge-wrap {
  width:100%;
  display: flex;
  background: #fff;
}
.gauge-wrap > div {
  flex: 1 0 0;
  margin: 10px;
}

/* above not needed for demo */

.gauge {
  width: 30%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.gauge::before {
  content: "";
  width: 1px;
  margin-left: -1px;
  float: left;
  height: 0;
  padding-top: 100%;
}
.gauge::after {
  content: "";
  display: table;
  clear: both;
}

.gauge svg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.circle1 {
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
  stroke-width: 2px;
  stroke-dasharray: 300px;
  stroke-linecap: round;
  stroke-dashoffset: 70;
  transform: rotate(132deg);
  transform-origin: center;
}
.circle2 {
  fill: none;
  stroke-width: 4px;
  stroke-dasharray: 300px;
  stroke-linecap: round;
  stroke-dashoffset: 234;
  transform: rotate(132deg);
  transform-origin: center;
}
.circle3 {
  fill: none;
  stroke-width: 1px;
  stroke: rgba(255, 255, 255, 0.9);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

.gauge2 .circle2 {
  stroke-dashoffset: 299;
  animation: mygauge 2s infinite;
}
.gauge2 .circle3 {
  transform: rotate(-70deg);
  animation: mygauge2 2s infinite;
}
@keyframes mygauge {
  from {
    stroke-dashoffset: 299;
  }
  to {
    stroke-dashoffset: 70;
  }
}
@keyframes mygauge2 {
  from {
    transform: rotate(-79deg);
  }
  to {
    transform: rotate(194deg);
  }
}
.gauge3 .circle2 {
  animation: mygauge 4s forwards;
}
.gauge3 .circle3 {
  animation: mygauge2 4s forwards;
}

/* text*/
.gauge-header {
  font-size: 5vw;
  margin: 0;
  text-shadow: 1px 1px #fff;
}
.gauge-header span {
  display: block;
  font-size: 22px;
  font-weight: normal;
  color: #666;
}
.gauge p {
  position: absolute;
  bottom: 0%;
  left: 4%;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px #fff;
}
p.finish {
  right: 10%;
  left: auto;
}

.activeIcon{
color:#f96300;
}

@media screen and (max-width: 760px) {
  .gauge-wrap {
    flex-wrap: wrap;
  }
  .gauge-wrap > div {
    flex: 0 0 60%;
    margin: 10px auto;
    width: 60%;
  }
}

Chrome View:

IE-11.

your early reply would appreciated.

Hi the problem is that IE11 doesn’t allow transforms on the circle element. I believe IE11 will accept transform as an attribute.

However I have not tested how that works as I am away on holiday until after the new year.

You may be able to apply a css transform to the svg itself and just rotate it but not sure how you would rotate the other little circles I don’t have facilities to test while away.

Here’s a proof of concept that seems to work in IE11 at the basic level.

You will have to test and add the bells and whistles yourself :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.