Menu
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>
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?
667
Animating fill requires SVG elements instead of CSS: linearGradient allows us to define multiple colors to fill a shape. Yes, a gradient. stop defines how and where to place colors inside the linearGradient.
External JavaScript To animate this path as if it's being drawn gradually and smoothly on the screen, you have to set the dash (and gap) lengths, using the stroke-dasharray attribute, equal to the path length. This is so that the length of each dash and gap in the dashed curve is equal to the length of the entire path.
Adding classes to the SVG allows CSS to select the individual shapes within the image. This means you can animate different shapes of the image at different times, creating a more complex effect.
When you animate an element, you use clip-path() to create a clipping region during the stages of the animation, creating the illusion that the element is indeed changing its shape. You can clip the element both before and when you animate it.
EDIT
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>
Here is the example: http://jsbin.com/ayiheb/2/edit
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
