如果我想要填充顏色而不是中風sgg

我在YouTube上觀看了一個關於動畫svg的視頻教程，並且我遵循它的一切運作良好..但是我需要動畫的圖像沒有中風有填充。如果我想要填充顏色而不是中風sgg

有人可以幫助我如何做到這一點？這是我用於筆畫的代碼。

<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 88.3 113.1" style="enable-background:new 0 0 88.3 113.1;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:#F8B318;} 
    .st1{fill:none;stroke:#CD689A;stroke-miterlimit:10;} 
    .st2{fill:none;} 
    <animaateTransform attributeName="transform" 
     repeatCount="indefinite"; /> 
    </style> 

    <defs> 
     <style> 
     .st1{ 
      stroke-dasharray: 800; 
      stroke-dasoffset: 0; 
      -webkit-animation: dash 3s linear forwards; 
      -moz-animation: dash 3s linear forwards; 
      -o-animation: dash 3s linear forwards; 
      animation: dash 3s linear forwards; 
      repeatCount="indefinite"; 
     } 

     @-webkit-keyframes dash { 
      from { 
       stroke-dashoffset: 800; 
      } 
      to { 
       stroke-dashoffset: 0; 
      } 
     } 
    </style> 
    </defs> 

    <g> 
     <g> 
     <path class="st0" d="M76,12.2c0-3.9-3.2-7.1-7.1-7.1c-2.2,0-4.1,1-5.4,2.6c-0.1,0.1-0.3,0.2-0.4,0.3L50.4,21.4 
     C49,22.9,47,23.6,45,23.3l-34.2-5.8c-1.9-0.3-3.8,0.3-5.2,1.6c-3.8,3.7-2.4,8.5,2.6,10.2L26,35.1c2.2,0.7,9,2.9,9,2.9 
     s-5.1,5.4-6.5,6.9l-8.9,9.6c-1.3,1.4-3.3,2.1-5.2,1.9l-7.4-1l-1.1-0.1c-4.2,2.2-3.5,8.4,1,9.7l1,0.3l7.6,2.2 
     c0.6,0.2,1.7,0.5,1.7,0.5s1.2-0.3,1.8-0.5l9.8-3c0.5-0.2,1.5-0.5,1.5-0.5s0.8-0.7,1.1-1.1L74.2,17c1.4-1.4,1.8-2.9,1.8-4.4 
     C76,12.5,76,12.4,76,12.2z M35.5,49.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5S38,45.6,38,47C38,48.4,36.9,49.5,35.5,49.5z 
     M42.3,42.5c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5c1.4,0,2.5,1.1,2.5,2.5S43.7,42.5,42.3,42.5z M48.9,35.6 
     c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5c1.4,0,2.5,1.1,2.5,2.5C51.4,34.4,50.2,35.6,48.9,35.6z M55.2,28.7 
     c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5c1.4,0,2.5,1.1,2.5,2.5C57.7,27.6,56.6,28.7,55.2,28.7z"/> 
    </g> 
    <g> 
    <path class="st1" d="M77.3,49.6c-5.5-4.6-12.2-7.1-20.7-7.4L44.7,54.9h9.8c11,0,16.6,5.3,16.6,15.7v22.1c0,1.7-1.4,3.1-3.1,3.1 
     H29.4c-2.7,0-4.9-2.2-4.9-4.9V76.4L12.7,89.1v9.8c0,5.6,4.9,10,11.2,10H77l0-0.1c5.1-0.4,9.2-4.7,9.2-10V69.4 
     C86.1,61.1,83.2,54.6,77.3,49.6z"/> 
    </g> 
</g> 
<line id="_x3C_Slice_x3E__1_" class="st2" x1="-98.6" y1="-14.5" x2="187.5" y2="-14.5"/> 
    </svg>

來源

2015-03-19 Nnn

這裏是背景動畫的例子：http://jsfiddle.net/pLh05ypL/1/

<svg width="320" height="320" viewBox="0 0 320 320"> 
    <path 
     fill="#FFFFFF" stroke="#000" 
     d="M160,100 Q200,100,200,300 Q100,300,100,200 Z"> 
     <animate 
      attributeType="XML" 
      attributeName="fill" 
      values="#800;#f00;#800;#800" 
      dur="0.8s" 
      repeatCount="indefinite"/> 
     </path> 
</svg>

希望它會幫助你。

來源

2015-03-23 08:30:42 Tolokoban

如果我想要填充顏色而不是中風sgg

回答

相關問題