css - SVG 的 SMIL 动画已弃用 - 仅使用 CSS 动画 SVG 圆圈的 cy- 和 cx-property？

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 动画或 Web 动画”。所以问题是它是否可以用 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 位置的 CSS 动画感到困惑，不确定这是否可行。

非常感谢您的建议。

Answer 1

之前凯多说过:

SMIL isn't really deprecated: only chrome stopped its support for it, and IE never started it

但是您可以使用 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 对其进行内部编码
• 将 svg 拆分为多个 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>