我不太熟悉在HTML中嵌入SVG的动画，但这是我试图做的事情。
我的网站上有一个SVG图像，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.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 125 219.1" style="enable-background:new 0 0 125 219.1;" xml:space="preserve">
<style type="text/css">
.st0{fill:#735545;}
.st1{fill:#5C4033;}
.st2{fill:none;}
.st3{fill:#3E3E48;}
.st4{fill:#2D2E39;}
.st5{fill:#BAB9B5;}
.st6{fill:#A3A2A1;}
.st7{fill:#CFCDC6;}
.st8{fill:#E0E0DC;}
.st9{fill:#E64D3C;}
.st10{fill:#CC3E36;}
.st11{fill:#C9C3BB;}
.st12{fill:#B0A79A;}
.st13{fill:#B5AEA4;}
.st14{fill:#E1CBB9;}
.st15{fill:#CDAE98;}
.st16{fill:#CB8E7E;}
.st17{fill:#B27669;}
.st18{fill:#393631;}
.st19{fill:#484642;}
.st20{fill:#F0C419;}
.st21{fill:#F29D1F;}
.st22{fill:#E57E25;}
.st23{fill:#D15627;}
.st24{fill:#C03B2B;}
</style>
<title>molay</title>
<g>
<g>
<g>
<polygon class="st0" points="37.5,8.7 37.5,201.1 61.8,201.1 61.8,0 "/>
<polygon class="st1" points="61.8,0 61.8,201.1 86.2,201.1 86.2,7.6 "/>
</g>
<g>
<g>
<polygon class="st2" points="94,86.4 67.5,98.1 61.8,100.6 86.2,89.8 "/>
<polygon class="st3" points="53,74.6 35.9,81.9 29.7,86.4 56.2,98.1 61.8,100.6 61.8,75.8 "/>
<polygon class="st4" points="94,86.4 87.8,81.9 70.7,74.6 61.8,75.8 61.8,100.6 67.5,98.1 "/>
<polygon class="st5" points="103.3,102.3 94,86.4 86.2,89.8 86.2,141.2 100,128.6 "/>
<polygon class="st6" points="29.7,86.4 20.5,102.3 23.7,128.6 37.5,141.2 37.5,89.8 "/>
<polygon class="st7" points="57.7,133.5 55.6,133.5 58.1,131.8 59.7,128.6 59.8,121.3 52.5,121.4 49.3,123 47.6,125.5
47.6,123.4 47.6,119.2 47.6,115.1 47.6,113 49.3,115.4 52.5,117.1 59.8,117.2 59.7,109.9 58.1,106.7 55.6,104.9 57.7,104.9
61.8,104.9 61.8,100.6 37.5,89.8 37.5,141.2 37.5,166.6 61.8,175.4 61.8,133.5 "/>
<polygon class="st8" points="61.8,100.6 61.8,104.9 61.9,104.9 66,104.9 68.1,104.9 65.7,106.7 64,109.9 63.9,117.2 71.2,117.1
74.4,115.4 76.1,113 76.1,115.1 76.1,119.2 76.1,123.4 76.1,125.5 74.4,123 71.2,121.4 63.9,121.3 64,128.6 65.7,131.8
68.1,133.5 66,133.5 61.9,133.5 61.8,133.5 61.8,175.4 86.2,166.6 86.2,141.2 86.2,89.8 "/>
<polygon class="st9" points="55.6,104.9 58.1,106.7 59.7,109.9 59.8,117.2 52.5,117.1 49.3,115.4 47.6,113 47.6,115.1
47.6,119.2 47.6,123.4 47.6,125.5 49.3,123 52.5,121.4 59.8,121.3 59.7,128.6 58.1,131.8 55.6,133.5 57.7,133.5 61.8,133.5
61.8,104.9 57.7,104.9 "/>
<polygon class="st10" points="61.9,133.5 66,133.5 68.1,133.5 65.7,131.8 64,128.6 63.9,121.3 71.2,121.4 74.4,123 76.1,125.5
76.1,123.4 76.1,119.2 76.1,115.1 76.1,113 74.4,115.4 71.2,117.1 63.9,117.2 64,109.9 65.7,106.7 68.1,104.9 66,104.9
61.9,104.9 61.8,104.9 61.8,133.5 "/>
</g>
<g>
<g>
<g>
<polygon class="st11" points="81.6,72.8 81.6,65.9 78.1,59.3 78.1,54.7 74.4,43.8 61.8,43.8 61.8,84.1 62.8,88.6 65.4,89.8
69.1,87.9 70.2,83.1 70.2,74.8 84.5,80.5 "/>
<polygon class="st12" points="53.5,83.1 54.6,87.9 53.5,83.1 "/>
<polygon class="st13" points="49.3,43.8 45.7,54.7 45.7,59.3 42.1,65.9 42.1,72.8 39.2,80.5 53.5,74.8 53.5,83.1 54.6,87.9
58.3,89.8 60.9,88.6 61.8,84.1 61.8,43.8 "/>
</g>
<g>
<polygon class="st14" points="71.2,40.3 74.4,43.8 74.4,48.3 72.9,55.3 72.7,59.3 69,67.6 69,67.6 72.7,59.2 72.9,55.2
74.4,48.2 74.4,43.7 "/>
<path class="st14" d="M55.8,38.5l-3.4,1.7l-3.2,3.6v4.5l1.5,7l0.2,4l3.7,8.4c0,0,4.5-3,4.6-3l2.6-0.1V37.3L55.8,38.5z"/>
<path class="st15" d="M72.9,55.3l1.5-7v-4.5l-3.1-3.5l-3.4-1.7l-6-1.2v27.3v0.1l2.6,0.1c0.2,0,4.5,2.9,4.5,2.9l0-0.1l3.7-8.3
L72.9,55.3z"/>
</g>
</g>
<g>
<polygon class="st16" points="59.2,64.7 61.8,66.8 64.5,64.7 61.8,59.4 "/>
<polygon class="st17" points="61.8,59.4 59.2,64.7 61.8,66.8 61.8,66.8 "/>
<polygon class="st18" points="52.6,52.4 53.5,51.3 58.6,49.3 59.7,50.1 "/>
<polygon class="st19" points="56.1,55.5 54.5,55.1 55.1,54.4 57,54.4 57.7,55.1 "/>
<polygon class="st19" points="67.6,55.4 66.1,55 66.7,54.3 68.6,54.3 69.2,55 "/>
<polygon class="st18" points="71.1,52.4 70.2,51.3 65.1,49.3 64,50.1 "/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<polygon class="st20" points="50,141.8 53.2,131.6 37.7,138.8 45.4,155.8 37.3,163.5 30.8,159 29.2,145.6 0,144.3 17.3,155.8
11.2,174.4 25.3,203.7 61.6,214.9 61.6,155.8 "/>
<polygon class="st21" points="123.3,144.3 94.1,145.6 92.5,159 85.9,163.5 77.8,155.8 85.6,138.8 70.1,131.6 73.2,141.8
61.6,155.8 61.6,214.9 98,203.7 112.1,174.4 106,155.8 "/>
</g>
<g>
<polygon class="st22" points="50,146 53.2,135.8 37.7,142.9 45.4,159.9 37.3,167.6 30.8,163.2 29.2,149.8 0,148.4 17.3,159.9
11.2,178.6 25.3,207.9 61.6,219.1 61.6,159.9 "/>
<polygon class="st23" points="123.3,148.4 94.1,149.8 92.5,163.2 85.9,167.6 77.8,159.9 85.6,142.9 70.1,135.8 73.2,146
61.6,159.9 61.6,219.1 98,207.9 112.1,178.6 106,159.9 "/>
</g>
<g>
<polygon class="st9" points="54,171 56.1,164.3 45.9,169 51,180.1 45.7,185.2 41.4,182.3 40.3,173.5 21.1,172.6 32.5,180.1
28.4,192.4 37.7,211.7 61.6,219.1 61.6,180.1 "/>
<polygon class="st24" points="102.2,172.6 83,173.5 81.9,182.3 77.6,185.2 72.3,180.1 77.4,169 67.2,164.3 69.3,171 61.6,180.1
61.6,219.1 85.6,211.7 94.8,192.4 90.8,180.1 "/>
</g>
</g>
<polygon class="st21" points="107.6,135.1 125,128.1 107.6,131.3 "/>
<polygon class="st20" points="17.4,135.1 0,128.1 17.4,131.3 "/>
<polygon class="st20" points="10.8,122.9 13.8,126.6 15.6,122.9 "/>
<polygon class="st21" points="112.3,122.9 109.3,126.6 107.6,122.9 "/>
</g>
我尝试动画“＆＃39; g”中的某些部分。括号使用animate.css。所以我会将它们包裹起来......
<section class="wow animated fadeInLeft">
</section>
但它没有工作，所以显然我做错了。我希望.svg的某个部分开始脉动（所以无限放大和缩小）。以下部分......
<g>
<g>
<polygon class="st20" points="50,141.8 53.2,131.6 37.7,138.8 45.4,155.8 37.3,163.5 30.8,159 29.2,145.6 0,144.3 17.3,155.8
11.2,174.4 25.3,203.7 61.6,214.9 61.6,155.8 "/>
<polygon class="st21" points="123.3,144.3 94.1,145.6 92.5,159 85.9,163.5 77.8,155.8 85.6,138.8 70.1,131.6 73.2,141.8
61.6,155.8 61.6,214.9 98,203.7 112.1,174.4 106,155.8 "/>
</g>
<g>
<polygon class="st22" points="50,146 53.2,135.8 37.7,142.9 45.4,159.9 37.3,167.6 30.8,163.2 29.2,149.8 0,148.4 17.3,159.9
11.2,178.6 25.3,207.9 61.6,219.1 61.6,159.9 "/>
<polygon class="st23" points="123.3,148.4 94.1,149.8 92.5,163.2 85.9,167.6 77.8,159.9 85.6,142.9 70.1,135.8 73.2,146
61.6,159.9 61.6,219.1 98,207.9 112.1,178.6 106,159.9 "/>
</g>
<g>
<polygon class="st9" points="54,171 56.1,164.3 45.9,169 51,180.1 45.7,185.2 41.4,182.3 40.3,173.5 21.1,172.6 32.5,180.1
28.4,192.4 37.7,211.7 61.6,219.1 61.6,180.1 "/>
<polygon class="st24" points="102.2,172.6 83,173.5 81.9,182.3 77.6,185.2 72.3,180.1 77.4,169 67.2,164.3 69.3,171 61.6,180.1
61.6,219.1 85.6,211.7 94.8,192.4 90.8,180.1 "/>
</g>
</g>
我可以实现什么代码来使svg组的那部分脉冲进出。谢谢你的帮助。
答案 0 :(得分：1)
您根本不需要添加任何包装元素。只需将animate.css特定的类添加到包装器g元素中，就像在下面的代码片段中一样，它会起作用。
您需要做的另一件事是为动画transform-origin元素设置g。我根据g元素的坐标将其设置为右下角。
.animated {
transform-origin: 61.6px 219.1px;
animation-iteration-count: infinite;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 20.1.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 125 219.1" style="enable-background:new 0 0 125 219.1;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #735545;
}
.st1 {
fill: #5C4033;
}
.st2 {
fill: none;
}
.st3 {
fill: #3E3E48;
}
.st4 {
fill: #2D2E39;
}
.st5 {
fill: #BAB9B5;
}
.st6 {
fill: #A3A2A1;
}
.st7 {
fill: #CFCDC6;
}
.st8 {
fill: #E0E0DC;
}
.st9 {
fill: #E64D3C;
}
.st10 {
fill: #CC3E36;
}
.st11 {
fill: #C9C3BB;
}
.st12 {
fill: #B0A79A;
}
.st13 {
fill: #B5AEA4;
}
.st14 {
fill: #E1CBB9;
}
.st15 {
fill: #CDAE98;
}
.st16 {
fill: #CB8E7E;
}
.st17 {
fill: #B27669;
}
.st18 {
fill: #393631;
}
.st19 {
fill: #484642;
}
.st20 {
fill: #F0C419;
}
.st21 {
fill: #F29D1F;
}
.st22 {
fill: #E57E25;
}
.st23 {
fill: #D15627;
}
.st24 {
fill: #C03B2B;
}
</style>
<title>molay</title>
<g>
<g>
<g>
<polygon class="st0" points="37.5,8.7 37.5,201.1 61.8,201.1 61.8,0 " />
<polygon class="st1" points="61.8,0 61.8,201.1 86.2,201.1 86.2,7.6 " />
</g>
<g>
<g>
<polygon class="st2" points="94,86.4 67.5,98.1 61.8,100.6 86.2,89.8 " />
<polygon class="st3" points="53,74.6 35.9,81.9 29.7,86.4 56.2,98.1 61.8,100.6 61.8,75.8 " />
<polygon class="st4" points="94,86.4 87.8,81.9 70.7,74.6 61.8,75.8 61.8,100.6 67.5,98.1 " />
<polygon class="st5" points="103.3,102.3 94,86.4 86.2,89.8 86.2,141.2 100,128.6 " />
<polygon class="st6" points="29.7,86.4 20.5,102.3 23.7,128.6 37.5,141.2 37.5,89.8 " />
<polygon class="st7" points="57.7,133.5 55.6,133.5 58.1,131.8 59.7,128.6 59.8,121.3 52.5,121.4 49.3,123 47.6,125.5
47.6,123.4 47.6,119.2 47.6,115.1 47.6,113 49.3,115.4 52.5,117.1 59.8,117.2 59.7,109.9 58.1,106.7 55.6,104.9 57.7,104.9
61.8,104.9 61.8,100.6 37.5,89.8 37.5,141.2 37.5,166.6 61.8,175.4 61.8,133.5 " />
<polygon class="st8" points="61.8,100.6 61.8,104.9 61.9,104.9 66,104.9 68.1,104.9 65.7,106.7 64,109.9 63.9,117.2 71.2,117.1
74.4,115.4 76.1,113 76.1,115.1 76.1,119.2 76.1,123.4 76.1,125.5 74.4,123 71.2,121.4 63.9,121.3 64,128.6 65.7,131.8
68.1,133.5 66,133.5 61.9,133.5 61.8,133.5 61.8,175.4 86.2,166.6 86.2,141.2 86.2,89.8 " />
<polygon class="st9" points="55.6,104.9 58.1,106.7 59.7,109.9 59.8,117.2 52.5,117.1 49.3,115.4 47.6,113 47.6,115.1
47.6,119.2 47.6,123.4 47.6,125.5 49.3,123 52.5,121.4 59.8,121.3 59.7,128.6 58.1,131.8 55.6,133.5 57.7,133.5 61.8,133.5
61.8,104.9 57.7,104.9 " />
<polygon class="st10" points="61.9,133.5 66,133.5 68.1,133.5 65.7,131.8 64,128.6 63.9,121.3 71.2,121.4 74.4,123 76.1,125.5
76.1,123.4 76.1,119.2 76.1,115.1 76.1,113 74.4,115.4 71.2,117.1 63.9,117.2 64,109.9 65.7,106.7 68.1,104.9 66,104.9
61.9,104.9 61.8,104.9 61.8,133.5 " />
</g>
<g>
<g>
<g>
<polygon class="st11" points="81.6,72.8 81.6,65.9 78.1,59.3 78.1,54.7 74.4,43.8 61.8,43.8 61.8,84.1 62.8,88.6 65.4,89.8
69.1,87.9 70.2,83.1 70.2,74.8 84.5,80.5 " />
<polygon class="st12" points="53.5,83.1 54.6,87.9 53.5,83.1 " />
<polygon class="st13" points="49.3,43.8 45.7,54.7 45.7,59.3 42.1,65.9 42.1,72.8 39.2,80.5 53.5,74.8 53.5,83.1 54.6,87.9
58.3,89.8 60.9,88.6 61.8,84.1 61.8,43.8 " />
</g>
<g>
<polygon class="st14" points="71.2,40.3 74.4,43.8 74.4,48.3 72.9,55.3 72.7,59.3 69,67.6 69,67.6 72.7,59.2 72.9,55.2
74.4,48.2 74.4,43.7 " />
<path class="st14" d="M55.8,38.5l-3.4,1.7l-3.2,3.6v4.5l1.5,7l0.2,4l3.7,8.4c0,0,4.5-3,4.6-3l2.6-0.1V37.3L55.8,38.5z" />
<path class="st15" d="M72.9,55.3l1.5-7v-4.5l-3.1-3.5l-3.4-1.7l-6-1.2v27.3v0.1l2.6,0.1c0.2,0,4.5,2.9,4.5,2.9l0-0.1l3.7-8.3
L72.9,55.3z" />
</g>
</g>
<g>
<polygon class="st16" points="59.2,64.7 61.8,66.8 64.5,64.7 61.8,59.4 " />
<polygon class="st17" points="61.8,59.4 59.2,64.7 61.8,66.8 61.8,66.8 " />
<polygon class="st18" points="52.6,52.4 53.5,51.3 58.6,49.3 59.7,50.1 " />
<polygon class="st19" points="56.1,55.5 54.5,55.1 55.1,54.4 57,54.4 57.7,55.1 " />
<polygon class="st19" points="67.6,55.4 66.1,55 66.7,54.3 68.6,54.3 69.2,55 " />
<polygon class="st18" points="71.1,52.4 70.2,51.3 65.1,49.3 64,50.1 " />
</g>
</g>
</g>
</g>
<g>
<g class='animated pulse'>
<g>
<polygon class="st20" points="50,141.8 53.2,131.6 37.7,138.8 45.4,155.8 37.3,163.5 30.8,159 29.2,145.6 0,144.3 17.3,155.8
11.2,174.4 25.3,203.7 61.6,214.9 61.6,155.8 " />
<polygon class="st21" points="123.3,144.3 94.1,145.6 92.5,159 85.9,163.5 77.8,155.8 85.6,138.8 70.1,131.6 73.2,141.8
61.6,155.8 61.6,214.9 98,203.7 112.1,174.4 106,155.8 " />
</g>
<g>
<polygon class="st22" points="50,146 53.2,135.8 37.7,142.9 45.4,159.9 37.3,167.6 30.8,163.2 29.2,149.8 0,148.4 17.3,159.9
11.2,178.6 25.3,207.9 61.6,219.1 61.6,159.9 " />
<polygon class="st23" points="123.3,148.4 94.1,149.8 92.5,163.2 85.9,167.6 77.8,159.9 85.6,142.9 70.1,135.8 73.2,146
61.6,159.9 61.6,219.1 98,207.9 112.1,178.6 106,159.9 " />
</g>
<g>
<polygon class="st9" points="54,171 56.1,164.3 45.9,169 51,180.1 45.7,185.2 41.4,182.3 40.3,173.5 21.1,172.6 32.5,180.1
28.4,192.4 37.7,211.7 61.6,219.1 61.6,180.1 " />
<polygon class="st24" points="102.2,172.6 83,173.5 81.9,182.3 77.6,185.2 72.3,180.1 77.4,169 67.2,164.3 69.3,171 61.6,180.1
61.6,219.1 85.6,211.7 94.8,192.4 90.8,180.1 " />
</g>
</g>
<polygon class="st21" points="107.6,135.1 125,128.1 107.6,131.3 " />
<polygon class="st20" points="17.4,135.1 0,128.1 17.4,131.3 " />
<polygon class="st20" points="10.8,122.9 13.8,126.6 15.6,122.9 " />
<polygon class="st21" points="112.3,122.9 109.3,126.6 107.6,122.9 " />
</g>
</g>
</svg>