SVG內部的網頁動畫用作背景圖片時出現故障

我剛剛使用在線服務生成了一個基於SVG的加載指示器，但是每次加載頁面時都會使用它，我從Chrome獲得一條警告，告知我SMIL動畫正在被棄用，這相當令人討厭。爲了擺脫它，我決定考慮用Web動畫替換<animate>標籤。以下是原始SVG：SVG內部的網頁動畫用作背景圖片時出現故障

<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"> 
 
    <circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/> 
 
    <circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round"> 
 
    <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/> 
 
    <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/> 
 
    </circle> 
 
</svg>

，這裏是我結束了：

<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/> 
 
    <circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round" id="line"/> 
 
    <script type="text/javascript" xlink:href="https://cdn.rawgit.com/web-animations/web-animations-js/45d8e40300e82ff02ccfbbc78c89500de0f5616f/web-animations.min.js"></script> 
 
    <script type="text/javascript"><![CDATA[ 
 
    var line = document.getElementById("line"); 
 
    line.animate(
 
     [ 
 
     {strokeDashoffset:0}, 
 
     {strokeDashoffset:502} 
 
     ], 
 
     { duration: 2000, iterations: Infinity } 
 
    ); 
 
    line.animate(
 
     [ 
 
     {strokeDasharray:"150.6 100.4"}, 
 
     {strokeDasharray:"1 250"}, 
 
     {strokeDasharray:"150.6 100.4"} 
 
     ], 
 
     { duration: 2000, iterations: Infinity } 
 
    ); 
 
    ]]></script> 
 
</svg>

我正要很興奮，我設法讓它工作，然後當我注意到確切的時候，我的笑容就凍結在我的臉上相同的SVG，在CSS中用作background-image時，完全拒絕動畫（下面的演示;請注意，我在此使用數據URI將SVG內聯，但在使用常規URL加載SVG時會發生同樣的情況）。

body:before { 
 
    content: ''; 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: url('data:image/svg+xml;utf8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round" id="line"/><script type="text/javascript" xlink:href="https://cdn.rawgit.com/web-animations/web-animations-js/45d8e40300e82ff02ccfbbc78c89500de0f5616f/web-animations.min.js"></script><script type="text/javascript"><![CDATA[var line = document.getElementById("line");line.animate([{strokeDashoffset:0},{strokeDashoffset:502}],{ duration: 2000, iterations: Infinity });line.animate([{strokeDasharray:"150.6 100.4"},{strokeDasharray:"1 250"},{strokeDasharray:"150.6 100.4"}],{ duration: 2000, iterations: Infinity });]]></script></svg>') no-repeat center center; 
 
    background-size: contain; 
 
}

如果我只是忽略了警告，並留在SMIL或者是有辦法使Web動畫裏面工作SVGs？

來源

2016-07-29 SeinopSys

腳本沒有背景圖片運行，因此沒有，沒有這樣做的方式。 –