網站預加載器 - SVG 動畫圖標問題

Question

我正在嘗試在 WordPress CMS 上創建網站預加載器。 在 PHP 主題中，我允許更改圖標和圖標顏色。 一切正常，但有一件事我不知道該怎么做。 SVG 圖標不會立即動畫，而是在頁面加載后。 如何解決？

SVG 僅在我使用時立即動畫： <img src="'. $icon_url.'">或<object type="image/svg+xml" data="'. $icon_url.'"></object>但在這些情況我不能使用<?php $icon_color; ?> <?php $icon_color; ?>更改圖標的顏色。

這是一支筆，我想在其中更改圖標的填充顏色。

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

任何想法？

Answer 1

作為我的實踐， <animateTransform>在加載時不起作用。 也許有什么方法可以讓武力起作用，但我不知道。 我分享你我的方式：我使用 css animation 為它：我添加rotate animation：

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

結合rotate animation 和 svg 元素（id 是L9 ）並刪除animateTransform

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

So summary https://codepen.io/space-coding/pen/xxwBxOE Of course, if you want better performance, you can delete this element after fadeOut animation because also if hide this svg, it keeping to rotate and use your GPU and內存。