0

I have a <div> element inside which I am trying to render an SVG image that is supplied by the CSS using the background property. The code is as follows

HTML 

        <div id="loading-img"></div>

CSS

#loading-img {
    background: url(/icons/loader.svg);
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: center;
}

SVG

svg width="60px"  height="60px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-progress-pie">
    <path fill="none" ng-attr-d="{{config.d}}" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-width="{{config.w}}" d="M50 35A15 15 0 0 1 50 65A15 15 0 0 1 50 35" stroke="#003478" stroke-width="30">
      <animate attributeName="stroke-dasharray" calcMode="spline" values="0 0 0 95;0 0 95 95;0 95 95 95" keyTimes="0;0.5;1" dur="2.0" keySplines="0.5 0 0.5 1;0.5 0 0.5 1" begin="0s" repeatCount="indefinite"></animate>
      <animate attributeName="stroke" ng-attr-values="{{config.colors}}" keyTimes="0;0.25;0.5;0.75;1" ng-attr-dur="{{config.speed2}}s" calcMode="discrete" repeatCount="indefinite" values="#003478;#003478;#003478;#003478;#003478" dur="3s"></animate>
    </path>
  </svg>

This code works perfectly in Chrome and Safari but not in IE11. Why does this happen and how do I solve this?

Thanks in Advance

Archit Arora
  • 2,508
  • 7
  • 43
  • 69
  • what's exactly happening in IE ? do you have screen shots or can you explain more? – Adam Apr 19 '18 at 01:29
  • It renders as a static image. I don't see any animations. – Archit Arora Apr 19 '18 at 01:30
  • 1
    related : https://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11 – Taki Apr 19 '18 at 01:33
  • 2
    IE doesn't support SMIL animations, normally you would have been able to use a js implementation like fakeSmile to workaround that issue, but since you are using this SVG as a background-image, you are out of luck... As pointed out in @Taki's link, IE`,` – Kaiido Apr 19 '18 at 02:48

0 Answers0