1. 首頁
  2. 問答
  3. 如何使用CSS3爲SVG的某個部分製作動畫？

如何使用CSS3爲SVG的某個部分製作動畫？

2016-10-20 41 views
1

我對嵌入HTML中的SVG動畫不太熟悉，但這是我試圖做的。如何使用CSS3爲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>

我試圖用animate.css的 'G' 括號內動畫的某些部分。所以我會圍繞他們...

<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組的部分脈衝進出。謝謝你的幫助。

來源

2016-10-20 Asem H

回答

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>

來源

2016-10-20 04:47:59 Harry

+0

您的SVG技巧所折服。如果可以學習SVG，你可以分享一些文檔或學習材料嗎？我瞭解除PATH標籤外的其他標籤。 –

+0

[email protected]是我的郵件ID –

+0

@SanthoshKumar：我用於SVG的唯一參考是MDN。以下是指向[路徑標記]上的[MDN導師]（https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths）的鏈接。 – Harry

相關問題

 相關問題