Question

我有一个<div>元素，我在其中尝试使用SVG属性呈现CSS提供的background图像。代码如下

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>

此代码适用于Chrome和Safari，但不适用于IE11。为什么会发生这种情况？如何解决这个问题？

先谢谢

SVG作为背景图像在IE中不起作用

0 个答案: