使用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路径填充

回答

相关问题