CSSとJSなしのSvgアニメーション

私はsvgアニメーションに問題があります。私のSVGCSSとJSなしのSvgアニメーション

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:#CCCCCC;} 
    .st1{fill:#00B4D5;} 
</style> 
<g> 
    <g> 
     <path class="st0" d="M340.2,263.8c46.3-3.3,82.5-42.9,82.5-90.3c0-41.2-28-77.7-66.3-87.8C348.2,36.4,305.8,0,254.9,0 
      c-36.9,0-71.1,20-89.3,51.6c-3.5-0.7-7.2-1-10.8-1c-31.1,0-56.4,25.3-56.4,56.4c0,4,0.4,7.9,1.2,11.7 
      c-20.1,14.6-32.3,38.2-32.3,63.2c0,42.2,33.9,79.8,74,82c0.2,0,0.4,0,0.6,0h197.7C339.7,263.9,340,263.9,340.2,263.8z 
      M142.1,244.1c-29.9-1.8-55-30.2-55-62.2c0-20.7,11.1-40,29-50.4c4.2-2.4,6-7.5,4.3-12c-1.5-3.9-2.2-8.1-2.2-12.5 
      c0-20.2,16.4-36.6,36.6-36.6c4.3,0,8.5,0.7,12.5,2.2c4.8,1.8,10.2-0.4,12.4-5.1c13.6-29,43.2-47.7,75.3-47.7 
      c43.1,0,78.7,32.3,82.8,75.1c0.4,4.5,3.8,8.1,8.2,8.8c32.5,5.6,57,35.6,57,69.8c0,36.3-28.6,67.9-63.8,70.6H142.1z"/> 
     <path class="st1" d="M245,297.3c-5.5,0-9.9,4.4-9.9,9.9v116c-13.7,4.2-23.9,16.9-24.2,31.8c-0.2,9.1,3.1,17.8,9.4,24.4 
      c6.3,6.6,14.8,10.4,23.9,10.6h0.8l0,0c18.4,0,33.7-15,34.1-33.3c0.2-9.1-3.1-17.8-9.4-24.4c-4.1-4.3-9.2-7.4-14.8-9.1v-116 
      C254.9,301.7,250.5,297.3,245,297.3z M255.4,446c2.6,2.8,4.1,6.4,4,10.2c-0.2,7.7-6.6,14-14.3,14h-0.4c-3.8-0.1-7.4-1.7-10-4.4 
      c-2.6-2.8-4.1-6.4-4-10.2c0.2-7.7,6.6-14,14.3-14h0.4C249.2,441.6,252.7,443.2,255.4,446z"/> 
     <path class="st1" d="M181.4,307.2v55.5c0,9.6-7.8,17.3-17.3,17.3h-29.2c-4.3-14-17.3-24.3-32.7-24.3C83.4,355.7,68,371,68,389.9 
      s15.3,34.2,34.2,34.2c15.4,0,28.4-10.2,32.7-24.3h29.2c20.5,0,37.1-16.7,37.1-37.1v-55.5c0-5.5-4.4-9.9-9.9-9.9 
      C185.9,297.3,181.4,301.7,181.4,307.2z M102.2,404.3c-7.9,0-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4c7.9,0,14.4,6.4,14.4,14.4 
      S110.2,404.3,102.2,404.3z"/> 
     <path class="st1" d="M325.9,399.9h29.2c4.3,14,17.3,24.3,32.7,24.3c18.8,0,34.2-15.3,34.2-34.2s-15.3-34.2-34.2-34.2 
      c-15.4,0-28.4,10.2-32.7,24.3h-29.2c-9.6,0-17.3-7.8-17.3-17.3v-55.5c0-5.5-4.4-9.9-9.9-9.9s-9.9,4.4-9.9,9.9v55.5 
      C288.8,383.2,305.4,399.9,325.9,399.9z M387.8,375.6c7.9,0,14.4,6.4,14.4,14.4s-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4 
      S379.8,375.6,387.8,375.6z"/> 
    </g> 
</g> 
</svg>

ため、このコードは、私がGIFでのようなアニメーションを行う必要があります。

アニメーションタグのみを使用する必要があります。 JSとCSSは適切ではありません。なぜなら、mozillaでは動作しないからです。手伝ってくれますか。進んでいただきありがとうございます。

出典

2016-10-26 Maksym Krugliachenko

あなたが、少なくとも自分のためにこれをコーディングすることを試みることが期待されます。スタックオーバーフローはコードを書くサービスではありません。私はいくつか[**追加の研究**]を行うことをお勧めします（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） Googleを介して、またはSOを検索して、試みてください。それでも問題が解決しない場合は、**あなたのコード**に戻り、あなたが試したことを説明してください。 –

は、私はあなたに提案する次

<animate id= first href="#c" attributeName="class" begin="0s;third.end" values="st0;st1" dur="1s" /> 
<animate id= second href="#b" attributeName="class" begin="first.end" values="st0;st1" dur="1s" /> 
<animate id= third href="#d" attributeName="class" begin="second.end" values="st0;st1" dur="1s"/>

あなたが見ることができるように、アニメーション：その後のような各パスをアニメーション

<path id="a" class="st0" d="M340.2,263.8c46.3-3.3,82.5-42.9,82.5-90.3c0-41.2-28-77.7-66.3-87.8C348.2,36.4,305.8,0,254.9,0 
c-36.9,0-71.1,20-89.3,51.6c-3.5-0.7-7.2-1-10.8-1c-31.1,0-56.4,25.3-56.4,56.4c0,4,0.4,7.9,1.2,11.7 
c-20.1,14.6-32.3,38.2-32.3,63.2c0,42.2,33.9,79.8,74,82c0.2,0,0.4,0,0.6,0h197.7C339.7,263.9,340,263.9,340.2,263.8z 
M142.1,244.1c-29.9-1.8-55-30.2-55-62.2c0-20.7,11.1-40,29-50.4c4.2-2.4,6-7.5,4.3-12c-1.5-3.9-2.2-8.1-2.2-12.5 
c0-20.2,16.4-36.6,36.6-36.6c4.3,0,8.5,0.7,12.5,2.2c4.8,1.8,10.2-0.4,12.4-5.1c13.6-29,43.2-47.7,75.3-47.7 
c43.1,0,78.7,32.3,82.8,75.1c0.4,4.5,3.8,8.1,8.2,8.8c32.5,5.6,57,35.6,57,69.8c0,36.3-28.6,67.9-63.8,70.6H142.1z"/>

：

まずなどの各パスにIDを入れてidも持っていて、hrefでパスを参照します。 attributeNameは、アニメーション化する必要がある属性です。

だから私は、あなたがそれをこのように行う提案：

<?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve"> 
 
<style type="text/css"> 
 
    .st0{fill:#CCCCCC;} 
 
    .st1{fill:#00B4D5;} 
 
</style> 
 
<g> 
 
    <g> 
 
     <path id="a" class="st0" d="M340.2,263.8c46.3-3.3,82.5-42.9,82.5-90.3c0-41.2-28-77.7-66.3-87.8C348.2,36.4,305.8,0,254.9,0 
 
      c-36.9,0-71.1,20-89.3,51.6c-3.5-0.7-7.2-1-10.8-1c-31.1,0-56.4,25.3-56.4,56.4c0,4,0.4,7.9,1.2,11.7 
 
      c-20.1,14.6-32.3,38.2-32.3,63.2c0,42.2,33.9,79.8,74,82c0.2,0,0.4,0,0.6,0h197.7C339.7,263.9,340,263.9,340.2,263.8z 
 
      M142.1,244.1c-29.9-1.8-55-30.2-55-62.2c0-20.7,11.1-40,29-50.4c4.2-2.4,6-7.5,4.3-12c-1.5-3.9-2.2-8.1-2.2-12.5 
 
      c0-20.2,16.4-36.6,36.6-36.6c4.3,0,8.5,0.7,12.5,2.2c4.8,1.8,10.2-0.4,12.4-5.1c13.6-29,43.2-47.7,75.3-47.7 
 
      c43.1,0,78.7,32.3,82.8,75.1c0.4,4.5,3.8,8.1,8.2,8.8c32.5,5.6,57,35.6,57,69.8c0,36.3-28.6,67.9-63.8,70.6H142.1z"/> 
 
     <path id="b" class="st1" d="M245,297.3c-5.5,0-9.9,4.4-9.9,9.9v116c-13.7,4.2-23.9,16.9-24.2,31.8c-0.2,9.1,3.1,17.8,9.4,24.4 
 
      c6.3,6.6,14.8,10.4,23.9,10.6h0.8l0,0c18.4,0,33.7-15,34.1-33.3c0.2-9.1-3.1-17.8-9.4-24.4c-4.1-4.3-9.2-7.4-14.8-9.1v-116 
 
      C254.9,301.7,250.5,297.3,245,297.3z M255.4,446c2.6,2.8,4.1,6.4,4,10.2c-0.2,7.7-6.6,14-14.3,14h-0.4c-3.8-0.1-7.4-1.7-10-4.4 
 
      c-2.6-2.8-4.1-6.4-4-10.2c0.2-7.7,6.6-14,14.3-14h0.4C249.2,441.6,252.7,443.2,255.4,446z"/> 
 
     <path id="c" class="st1" d="M181.4,307.2v55.5c0,9.6-7.8,17.3-17.3,17.3h-29.2c-4.3-14-17.3-24.3-32.7-24.3C83.4,355.7,68,371,68,389.9 
 
      s15.3,34.2,34.2,34.2c15.4,0,28.4-10.2,32.7-24.3h29.2c20.5,0,37.1-16.7,37.1-37.1v-55.5c0-5.5-4.4-9.9-9.9-9.9 
 
      C185.9,297.3,181.4,301.7,181.4,307.2z M102.2,404.3c-7.9,0-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4c7.9,0,14.4,6.4,14.4,14.4 
 
      S110.2,404.3,102.2,404.3z"/> 
 
     <path id="d" class="st1" d="M325.9,399.9h29.2c4.3,14,17.3,24.3,32.7,24.3c18.8,0,34.2-15.3,34.2-34.2s-15.3-34.2-34.2-34.2 
 
      c-15.4,0-28.4,10.2-32.7,24.3h-29.2c-9.6,0-17.3-7.8-17.3-17.3v-55.5c0-5.5-4.4-9.9-9.9-9.9s-9.9,4.4-9.9,9.9v55.5 
 
      C288.8,383.2,305.4,399.9,325.9,399.9z M387.8,375.6c7.9,0,14.4,6.4,14.4,14.4s-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4 
 
      S379.8,375.6,387.8,375.6z"/> 
 
    </g> 
 
\t <animate id= first href="#c" attributeName="class" begin="0s;third.end" values="st0;st1" dur="1s" /> 
 
\t <animate id= second href="#b" attributeName="class" begin="first.end" values="st0;st1" dur="1s" /> 
 
\t <animate id= third href="#d" attributeName="class" begin="second.end" values="st0;st1" dur="1s"/> 
 
</g> 
 
</svg>

出典

2017-08-03 08:39:41

アニメーションでは（デフォルトの 'fill =" remove "をそのままにして）単一の値を使うほうが良いでしょう。https://jsfiddle.net/wuvuzd6w/1 – Kaiido

Laia Linares Ortellsあなたの答えは、ほぼ正しいことを。このようなアニメーションを開始するだけでした。

<animate id= first href="#c" attributeName="class" begin="0s;third.end" values="st0;st1" dur="1s" /> 
<animate id= second href="#b" attributeName="class" begin="first.end-0.5s" values="st0;st1" dur="1s" /> 
<animate id= third href="#d" attributeName="class" begin="second.end-0.5s" values="st0;st1" dur="1s"/>

ここに完全なアニメーションコードがあります。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve"> 
 
<style type="text/css"> 
 
    .st0{fill:#CCCCCC;} 
 
    .st1{fill:#00B4D5;} 
 
</style> 
 
<g> 
 
    <g> 
 
     <path id="a" class="st0" d="M340.2,263.8c46.3-3.3,82.5-42.9,82.5-90.3c0-41.2-28-77.7-66.3-87.8C348.2,36.4,305.8,0,254.9,0 
 
      c-36.9,0-71.1,20-89.3,51.6c-3.5-0.7-7.2-1-10.8-1c-31.1,0-56.4,25.3-56.4,56.4c0,4,0.4,7.9,1.2,11.7 
 
      c-20.1,14.6-32.3,38.2-32.3,63.2c0,42.2,33.9,79.8,74,82c0.2,0,0.4,0,0.6,0h197.7C339.7,263.9,340,263.9,340.2,263.8z 
 
      M142.1,244.1c-29.9-1.8-55-30.2-55-62.2c0-20.7,11.1-40,29-50.4c4.2-2.4,6-7.5,4.3-12c-1.5-3.9-2.2-8.1-2.2-12.5 
 
      c0-20.2,16.4-36.6,36.6-36.6c4.3,0,8.5,0.7,12.5,2.2c4.8,1.8,10.2-0.4,12.4-5.1c13.6-29,43.2-47.7,75.3-47.7 
 
      c43.1,0,78.7,32.3,82.8,75.1c0.4,4.5,3.8,8.1,8.2,8.8c32.5,5.6,57,35.6,57,69.8c0,36.3-28.6,67.9-63.8,70.6H142.1z"/> 
 
     <path id="b" class="st1" d="M245,297.3c-5.5,0-9.9,4.4-9.9,9.9v116c-13.7,4.2-23.9,16.9-24.2,31.8c-0.2,9.1,3.1,17.8,9.4,24.4 
 
      c6.3,6.6,14.8,10.4,23.9,10.6h0.8l0,0c18.4,0,33.7-15,34.1-33.3c0.2-9.1-3.1-17.8-9.4-24.4c-4.1-4.3-9.2-7.4-14.8-9.1v-116 
 
      C254.9,301.7,250.5,297.3,245,297.3z M255.4,446c2.6,2.8,4.1,6.4,4,10.2c-0.2,7.7-6.6,14-14.3,14h-0.4c-3.8-0.1-7.4-1.7-10-4.4 
 
      c-2.6-2.8-4.1-6.4-4-10.2c0.2-7.7,6.6-14,14.3-14h0.4C249.2,441.6,252.7,443.2,255.4,446z"/> 
 
     <path id="c" class="st1" d="M181.4,307.2v55.5c0,9.6-7.8,17.3-17.3,17.3h-29.2c-4.3-14-17.3-24.3-32.7-24.3C83.4,355.7,68,371,68,389.9 
 
      s15.3,34.2,34.2,34.2c15.4,0,28.4-10.2,32.7-24.3h29.2c20.5,0,37.1-16.7,37.1-37.1v-55.5c0-5.5-4.4-9.9-9.9-9.9 
 
      C185.9,297.3,181.4,301.7,181.4,307.2z M102.2,404.3c-7.9,0-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4c7.9,0,14.4,6.4,14.4,14.4 
 
      S110.2,404.3,102.2,404.3z"/> 
 
     <path id="d" class="st1" d="M325.9,399.9h29.2c4.3,14,17.3,24.3,32.7,24.3c18.8,0,34.2-15.3,34.2-34.2s-15.3-34.2-34.2-34.2 
 
      c-15.4,0-28.4,10.2-32.7,24.3h-29.2c-9.6,0-17.3-7.8-17.3-17.3v-55.5c0-5.5-4.4-9.9-9.9-9.9s-9.9,4.4-9.9,9.9v55.5 
 
      C288.8,383.2,305.4,399.9,325.9,399.9z M387.8,375.6c7.9,0,14.4,6.4,14.4,14.4s-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4 
 
      S379.8,375.6,387.8,375.6z"/> 
 
    </g> 
 
\t <animate id= first href="#c" attributeName="class" begin="0s;third.end" values="st0;st1" dur="1s" /> 
 
\t <animate id= second href="#b" attributeName="class" begin="first.end-0.5s" values="st0;st1" dur="1s" /> 
 
\t <animate id= third href="#d" attributeName="class" begin="second.end-0.5s" values="st0;st1" dur="1s"/> 
 
</g> 
 
</svg>

出典

2018-01-08 10:04:30

CSSとJSなしのSvgアニメーション

答えて

関連する問題