使用css動畫svg路徑填充

可以使用css更改svg填充。但我沒有設法創建動畫。這裏是我的SVG對象：使用css動畫svg路徑填充

<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> 
<rect id="fill" x="21" y="26" width="60" height="60"/> 
</svg>

，並使用SASS：

@include keyframes(loading) 
    0% 
    fill: black 
    50% 
    fill: white 
    100% 
    fill: black 
#fill 
    fill: white 
    @include animation(loading 3s infinite)

我在做什麼錯？

來源

2013-02-07 vadirn

編輯

好了，它看起來像這樣的事情應該工作。

<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> 
    <style type="text/css" > 
     <![CDATA[ 

      @keyframes fill { 
       0% { 
        fill: black; 
       } 
       50% { 
        fill: white; 
       } 
       100% { 
        fill: black; 
       } 
      } 

      #fill { 
       fill: black; 
       animation-name: fill; 
       animation-duration: 3s; 
       animation-iteration-count: infinite; 
      } 

     ]]> 
    </style> 
    <rect id="fill" x="21" y="26" width="60" height="60"/> 
</svg>

這裏是例如：http://jsbin.com/ayiheb/2/edit

來源

2013-02-07 17:02:23 gotohales

感謝=）但我需要動畫特定形狀#fill。 – vadirn

@evergreenv啊好的。是否有一個原因需要在CSS中完成，而不是SVG中的動畫標籤？ – gotohales

@evergreenv順便說一句，用應該工作的東西更新答案。讓我知道！ – gotohales

使用css動畫svg路徑填充

回答

相關問題