1
オンラインサービスを使用してSVGベースのローディングインジケータを生成しましたが、そのページを読み込むたびにSMILアニメーションを知らせる警告が表示されます推奨されなくなりました。これはかなり不快です。それを取り除こうとして、私は<animate>タグをWebアニメーションに置き換えることにしました。以下は、オリジナルのSVGです：バックグラウンドイメージとして使用するとSVG内のWebアニメーションが壊れます
<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を動作させるための方法はありますでしょうか？
スクリプトはありませんので、何があります背景画像には実行されません。その仕事をする方法。 –