我是一名平面设计师,只是在学习SVG动画图标和编码.我在插图画家中说明了一杯咖啡,然后将其导出为SVG文件.我试图让蒸汽动画,使它像真正的蒸汽一样升起.问题是,即使我在CSS中选择了.steam1 .st1,它也不会激活蒸汽.我可能只是对我一直在研究的教程数量感到困惑.有人可以查看我的HTML代码插图,并帮助我使用基于此代码的CSS正确设置它的动画http://codepen.io/anon/pen/DLmCn
这是我在HTML http://codepen.io/anon/pen/niHCA中的 SVG代码
<body>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="icon"
width="284px" height="284px" viewBox="0 0 64 64"
style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#49331B;}
.st1{fill:#E6E7E8;}
.st2{opacity:0.8;fill:url(#SVGID_4_);}
.st3{opacity:0.8;fill:url(#SVGID_5_);}
.st4{fill:#F3E8C3;stroke:#F3E8C3;stroke-width:0.9486;stroke-miterlimit:10;}
.st5{fill:none;stroke:#FFFFFF;stroke-width:0.4743;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st6{fill:#F3E8C3;}
.st7{fill:#F4EFE9;}
.st8{fill:#F79F63;}
.st9{fill:url(#SVGID_1_);}
.st10{fill:url(#SVGID_3_);}
.st11{opacity:0.7;}
.st12{fill:#307BA5;}
.st13{fill:#328AC6;}
.st14{fill:none;stroke:#E2D5B7;stroke-width:0.9486;stroke-miterlimit:10;}
.st15{opacity:0.5;fill:url(#SVGID_2_);}
.st16{opacity:0.5;fill:url(#SVGID_6_);}
.st17{fill:#77593D;}
]]>
</style>
<rect x="0.1" class="st8" width="64" height="64"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="10.5957" y1="55.7451" …