how to change fill of svg object in keyframes animation

Question

updated code

<!DOCTYPE>
<html>
<head>
</head>
<body>
<h1> first svg try</h1>
<object type="image/svg+xml" data="svg.svg" id="img">Your browser no support</object>
</body>
</html>

with my svg file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="215.069px" height="121.917px" viewBox="0 0 215.069 121.917" enable-background="new 0 0 215.069 121.917" xml:space="preserve"><style>.style0{stroke: #FFFFFF;stroke-miterlimit:  10;fill:    #231F20;


}.style0 {
animation:mymove 5s infinite;
-webkit-animation:mymove 10s infinite; /* Safari and Chrome */ 
-webkit-transform-origin:center;
}

@-webkit-keyframes mymove
{
0%, 100%   {-webkit-transform: rotate(0deg); fill: #000000;}
25%  {-webkit-transform: rotate(90deg); fill: #78ab98;}
50%  {-webkit-transform: rotate(180deg); fill: #aa7454;}
75%  {-webkit-transform: rotate(270deg); fill: #123456;}
}
</style><style>
</style><rect width="215.1" height="121.9" class="style0"/></svg>

This code achieves the transformations desired, but when the rectangle rotates, parts of it are not shown.

possible duplicate of [How to apply a style to an embedded SVG?](http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg) — Erik Dahlström, Oct 23 '13 at 13:52

score 1 · Answer 1 · answered Oct 22 '13 at 21:30

1

Add the animation to .style0 as opposed to #img.

.style0 {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 10s infinite;
}

jsFiddle here - if you want support across all browsers make a keyframe for -moz.

jsFiddle - without the rotate effect.

Updated CSS

.style0 {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 10s infinite;
}
@-webkit-keyframes mymove {
    0%, 100% {
        -webkit-transform: rotate(0deg);
        fill: #000000;
    }
    25% {
        -webkit-transform: rotate(90deg);
        fill: #78ab98;
    }
    50% {
        -webkit-transform: rotate(180deg);
        fill: #aa7454;
    }
    75% {
        -webkit-transform: rotate(270deg);
        fill: #123456;
    }
}
.style0 {
    stroke: #FFFFFF;
    stroke-miterlimit: 10;
    fill: #231F20;
}

answered Oct 22 '13 at 21:30

Josh Crozier

233,099
56
391
304

didn't work. I had tried something similar before with the same result. Any other ideas? – nvncbl Oct 22 '13 at 21:52
@nvncbl What browser are you using? – Josh Crozier Oct 22 '13 at 21:54
josh, i am using chrome, although i've tried it with ie (with its respective css) with no success. – nvncbl Oct 22 '13 at 21:59
1

i looked at your jsfiddle and it works for me too, i copied your code and it doesn't work. Do you guys have any idea why? – nvncbl Oct 22 '13 at 22:14
thank you josh. i didn't copy the html, which i'm thinking might be why it's not working, because i'm embedding the svg file as an object and not using the svg tag. – nvncbl Oct 23 '13 at 03:06
The fiddle http://jsfiddle.net/9hAeB/ is using inline svg and not ` – Erik Dahlström Oct 23 '13 at 13:55
thank you @ErikDahlström, I had checked the link to the question you provided. I still don't understand why with my original code above, I could get the object to rotate but not to change fill. Because of this, I thought maybe there was a way to apply styles to objects from an outer style tag. My guess now is that since rotate is a transformation, it can be applied to any block style html element, but changing the fill of something can only be applied to certain elements. Is my guess correct? – nvncbl Oct 23 '13 at 17:57
3

@nvncbl both the `fill` and the `transform` properties are applied to the ` – Erik Dahlström Oct 24 '13 at 08:18
Thank you @ErikDahlström, one more question for you. I have updated my code which makes the svg image rotate and change color, but if you look at what it does, the rectangle overflow is hidden when the rectangle rotates. I've tried setting a width to the object but it doesn't work. What are your ideas for that? – nvncbl Oct 24 '13 at 16:44

how to change fill of svg object in keyframes animation

1 Answers1