1

オンライン サービスを使用して SVG ベースの読み込みインジケーターを生成しましたが、それを使用するページが読み込まれるたびに Chrome から警告が表示され、SMIL アニメーションが非推奨になっていることが通知され、かなり不快です。それを取り除くために、<animate>タグを Web アニメーションに置き換えることを検討することにしました。以下は元の 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>

私はなんとかそれを機能させることができたことに本当に興奮しようとしていましたが、全く同じ SVGbackground-imageが CSS で として使用された場合、アニメーション化をまったく拒否することに気づいた途端、笑顔が凍りつきました (以下のデモ; 注記)。ここではデータ 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 アニメーションを SVG 内で動作させる方法はありますか?

4

1 に答える 1

2

backgrounImage残念ながら、プロパティを使用したアニメーションはまだサポートされていません。

CSS Backgrounds and Borders Module Level 3 Editor's Draft では、執筆時点で background-image に対して「Animatable: no」と記載されていますが、CSS での画像のクロスフェードのサポートは Chrome 19 Canary で登場しました。広範なサポートが提供されるまで、これはイメージ スプライトと background-position または opacity を介して偽装できます。グラデーションをアニメーション化するには、同じタイプでなければなりません

詳細については、次の記事を参照してください。

http://oli.jp/2010/css-animatable-properties/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

于 2016-11-29T20:51:41.733 に答える