没有CSS和JS的Svg动画

时间：2016-10-26 09:37:56

标签： css animation svg

我对svg动画有问题。 这段代码适用于我的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一样做动画。 enter image description here

我只需要使用animate标签。 JS和CSS不适合，因为不能在mozilla工作。你能帮我吗。 谢谢你的进步。

3 个答案:

答案 0 :(得分：4)

我建议你：

首先为每条路径添加一个id，如：

<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"/>

然后为每条路径设置动画，例如：

<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"/>

正如您所看到的，动画也有一个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>
	<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"/> 
</g>
</svg>

答案 1 :(得分：2)

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"/>

这是完整的动画代码。

＆＃13;
＆＃13; 
<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>
	<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"/> 
</g>
</svg>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您的代码有一个小问题。 ID需要带引号或双引号，例如：

<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"/>
相关问题
最新问题