Animate Svg Pfad füllen mit Css

Question

Es ist möglich, Svg füllen mit CSS zu ändern. Aber ich habe es nicht geschafft, eine Animation zu erstellen. Hier ist mein svg Objekt:

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

Und mit SASS:

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

Was mache ich falsch?

Answer 1

EDIT

Okay, es sieht aus wie so etwas wie dies funktionieren soll. Hier

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

ist das Beispiel: http://jsbin.com/ayiheb/2/edit