Geek Answers Handbook

Animation svg path fill using css

You can change svg fill with css. But I was not able 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>

And using 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?

+6
source share
1 answer

EDIT

Well, it seems 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>

Here is an example: http://jsbin.com/ayiheb/2/edit

+7
source

More articles:


All Articles