网站预加载器 - SVG 动画图标问题

Question

我正在尝试在 WordPress CMS 上创建网站预加载器。在 PHP 主题中，我允许更改图标和图标颜色。一切正常，但有一件事我不知道该怎么做。 SVG 图标不会立即动画，而是在页面加载后。如何解决？

SVG 只有在我使用时才会立即动画： <img src="'. $icon_url .'"> 或 <object type="image/svg+xml" data="'. $icon_url .'"></object> 但在这些情况下，我不能使用 <?php $icon_color; ?> 来更改图标的颜色。

这是一支笔，我想在其中更改图标的填充颜色。

https://codepen.io/avigodesign/pen/GRpMOBJ

有什么想法吗？

Answer 1

作为我的实践，<animateTransform> 在加载时不起作用。也许有什么方法可以让武力起作用，但我不知道。 我把我的方法分享给你： 我使用 css 动画： 我加rotate动画：

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

将rotate动画与svg元素（id为L9）结合并删除animateTransform

#L9 {animation: rotate 1s linear infinite;}

所以总结https://codepen.io/space-coding/pen/xxwBxOE 当然，如果你想要更好的性能，你可以在fadeOut动画之后删除这个元素，因为如果隐藏这个svg，它会继续旋转并使用你的GPU和RAM。