我的 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 动画感到困惑,不确定这是否可行。
非常感谢您的建议。
最佳答案
之前凯多说过:
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>
关于css - SVG 的 SMIL 动画已弃用 - 仅使用 CSS 动画 SVG 圆圈的 cy- 和 cx-property?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38877211/