使用CSS动画SVG路径填充 [英] Animate svg path fill using css

问题描述

可以使用CSS来改变SVG填充。但我没能创建一个动画。
这里是我的SVG对象：

It is possible to change svg fill using css. But I didn't manage to create an animation. Here is my svg object:

<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)

我在做什么错了？

What am I doing wrong?

推荐答案

修改

好吧，它看起来像这样的事情应该工作。

Okay it looks like something like this should work.

    <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

这篇关于使用CSS动画SVG路径填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！