Question

我的html中有一个SVG：

<img class="svg-loader" width="60" height="60" src="preloader.svg">

此SVG包含3个圆圈，这些圆圈内嵌动画以旋转并更改其cy和cx位置：

<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="preloader-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(244,117,51);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(245,0,87);stop-opacity:1" />
        </linearGradient>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <g transform="translate(1 1)" stroke-width="2">
            <circle cx="5" cy="50" r="5" fill="url(#preloader-gradient)">
                <animate attributeName="cy"
                     begin="0s" dur="2.2s"
                     values="50;5;50;50"
                     calcMode="linear"
                     repeatCount="indefinite" />
                <animate attributeName="cx"
                     begin="0s" dur="2.2s"
                     values="5;27;49;5"
                     calcMode="linear"
                     repeatCount="indefinite" />
            </circle>
            <circle cx="27" cy="5" r="5" fill="url(#preloader-gradient)">
                <animate attributeName="cy"
                     begin="0s" dur="2.2s"
                     from="5" to="5"
                     values="5;50;50;5"
                     calcMode="linear"
                     repeatCount="indefinite" />
                <animate attributeName="cx"
                     begin="0s" dur="2.2s"
                     from="27" to="27"
                     values="27;49;5;27"
                     calcMode="linear"
                     repeatCount="indefinite" />
            </circle>
            <circle cx="49" cy="50" r="5" fill="url(#preloader-gradient)">
                <animate attributeName="cy"
                     begin="0s" dur="2.2s"
                     values="50;50;5;50"
                     calcMode="linear"
                     repeatCount="indefinite" />
                <animate attributeName="cx"
                     from="49" to="49"
                     begin="0s" dur="2.2s"
                     values="49;5;27;49"
                     calcMode="linear"
                     repeatCount="indefinite" />
            </circle>
        </g>
    </g>
</svg>

Chrome控制台会发出警告，指出“SVG的SMIL动画（等）已被弃用并将被删除。请改用CSS动画或网络动画”。所以问题是，如果它可以用CSS动画完全替换内联动画。

现在，将CSS中的完整SVG无限旋转360度是微不足道的：

.svg-loader {
  -webkit-animation:spin 3s linear infinite;
  -moz-animation:spin 3s linear infinite;
  animation:spin 3s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform:rotate(360deg);
  }
}

但是，我坚持每个圈子的cy-position的CSS动画，不确定这是否可能。

非常感谢您的建议。

Answer 1

如之前的Kaiido所述：

SMIL并没有真正弃用：只有chrome停止了对它的支持，IE从未启动它

但是你可以使用css动画来达到相同的效果。

你必须将css放在svg文件中或者将svg内联，使用带有外部标记的img标签有限制。

例如：

<svg viewBox="0 0 57 57" width=57 height=57>
	<style>
		@keyframes path{
			25%{ transform: translate(0,0); }
			50%{ transform: translate(0,-44px); }
			75%{ transform: translate(-45px,-22px); }
			100%{ transform: translate(0,0); }
		}
		.circle{
			animation: path 2.2s linear infinite;
			fill: red;
		}
	</style>
	<circle cx="49" cy="50" r=5 class="circle"></circle>
</svg>

但是仍然上面的示例在IE和Edge中不起作用，您可以使用以下方法解决它：

使用HTML和CSS编写代码
在多个svgs中拆分svg并为svg标签设置动画
使用JS（在svg文件或内联中）

第二个解决方案的小例子：

@keyframes path{
	25%{ transform: translate(0,0); }
	50%{ transform: translate(0,-44px); }
	75%{ transform: translate(-45px,-22px); }
	100%{ transform: translate(0,0); }
}
svg{
	animation: path 2.2s linear infinite;
	margin-left: 50px;
	margin-top: 50px;
	width: 10px;
	height: 10px;
}
.circle{
	fill: red;
}

<svg viewBox="0 0 10 10" >
	<circle cx=5 cy=5 r=5 class="circle"></circle>
</svg>

SVG的SMIL动画已被弃用 - 仅使用CSS动画SVG圈子的cy和cx属性？

1 个答案: