SVG animation, how to move object in svg Options

[slokarij]

Hello everyone!
So I have this SVG file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 853.3 678.2" style="enable-background:new 0 0 853.3 678.2;" xml:space="preserve">
<?xml-stylesheet href="des.css" type="text/css"?>
<style type="text/css">
.st0{fill:#251F11;}
</style>
<path id="upgear" class="st0" d="M409.6,369.4v-36l-20.9-7c-2.6-11-7-21.8-13.1-31.7l9.9-19.7L360,249.6l-19.7,9.9
c-9.9-6.1-20.6-10.5-31.7-13.1l-7-20.9h-36l-7,20.9c-11,2.6-21.8,7-31.7,13.1l-19.7-9.9L181.8,275l9.9,19.7
c-6.1,9.9-10.5,20.6-13.1,31.7l-20.9,7v36l20.9,7c2.6,11,7,21.8,13.1,31.7l-9.9,19.7l25.5,25.5l19.7-9.9
c9.9,6.1,20.6,10.5,31.7,13.1l7,20.9h36l7-20.9c11-2.6,21.8-7,31.7-13.1l19.7,9.9l25.5-25.5l-9.9-19.7c6.1-9.9,10.5-20.6,13.1-31.7
L409.6,369.4z M340.9,408.7c-31.6,31.6-82.9,31.6-114.6,0s-31.6-82.9,0-114.5s82.9-31.6,114.6,0S372.5,377,340.9,408.7z"/>
<path id="downgear" class="st0" d="M607.6,504.4v-36l-20.9-7c-2.6-11-7-21.8-13.1-31.7l9.9-19.7L558,384.6l-19.7,9.9
c-9.9-6.1-20.6-10.5-31.7-13.1l-7-20.9h-36l-7,20.9c-11,2.6-21.8,7-31.7,13.1l-19.7-9.9L379.8,410l9.9,19.7
c-6.1,9.9-10.5,20.6-13.1,31.7l-20.9,7v36l20.9,7c2.6,11,7,21.8,13.1,31.7l-9.9,19.7l25.5,25.5l19.7-9.9
c9.9,6.1,20.6,10.5,31.7,13.1l7,20.9h36l7-20.9c11-2.6,21.8-7,31.7-13.1l19.7,9.9l25.5-25.5l-9.9-19.7c6.1-9.9,10.5-20.6,13.1-31.7
L607.6,504.4z M538.9,543.7c-31.6,31.6-82.9,31.6-114.5,0s-31.6-82.9,0-114.5s82.9-31.6,114.5,0S570.5,512,538.9,543.7z"/>
</svg>

and I want object #upgear to rotate, so I made a CSS file:

@keyframes move {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

#upgear {
animation-name: move;
animation-duration: 15.5s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
display: inline-block;
}

The problem is that animation is not working. CSS file is added properly because, for example, I can change color of #upgear object. But #upgear is not moving at all. Can someone help me with this? Greetings!

[pandy]

Do you use an older browser? Because it rotates for me.

Thanks for the tip! I tried a little SVG long ago, before the format was natively supported by browsers, and didn't realize you can style part of an SVG like this.

[slokarij]

How is it possible that it works for You? I use Chrome v.84, Blisk v.12, Edge v.84 and IE v. 11. None of that is working with this animation.
Whats is even weirder, I can change color of #upgear by command "fill" only at IE. Chrome, Edge and Blisk are not reacting to any command i've tried
Anybody have any clue?

[pandy]

How is it possible that it works for You?

Well, that's not a surprise. That's because I'm an elevated being.


I only tried one browser before, but now I let them all out. It works in every modern browsers I have except IE11.

FF
Iron (Chrome clone)
Edge
K-Meleon (older gecko)
K-Meleon (goanna fork)

Only thing I can think of is that's it's something else in the page that messes things up. You have more in the real page than you showed here, right? Can you link to it? Or past the whole lot in here if you can't.

[slokarij]

https://lukaux.com/ - it's this page, I want these gears to rotate slowly.
But it doesn't matter because when I go to https://jsfiddle.net/ and copypaste this whole svg+css file, then I see that it's working and rotating.
The problem is that when I launch the same code through all of my browsers, neither is working.
What's moreover, when I use those CSS lines on any other image on the page - it's working properly. Just this one object in SVG file does not react to animation

[pandy]

OK. I don't find the related CSS anywhere. Where is it?

Even if the CSS is there somewhere it won't work. There is no way you can reference part of the SVG from a style sheet as you've embedded it as an image (without linking it to the SVG and that you haven't). It's like trying to style a HTML page that has no reference to a style sheet.

I see three options.

1. You've imbedded the SVG with the IMG tag. If you instead embed the whole SVG code directly in the HTML, the CSS will work (provided it's there). You may need to put the SVG in a DIV or something to be able to position and size it an to keep it all together, XML declaration and all.

2. Reference the CSS from the SVG. You could put it in the style block that's already there.

3. Rewrite the SVG and create the animation with SVG.

I tried the two first to be sure. Both methods work. Obviously I didn't try 3, but I'm pretty sure it could be done already 15 years ago when I fiddeled with this. I made things bounce and swirl so...

If it was me and I wanted it done quickly I would go with 2. That keeps everything together, should you want to use the SVG someplace else, and it's the quickest and easiest, nothing else needs to be changed.

Cheer up! This is fun.

[slokarij]

You mean like put those CSS lines (keyframes, animations) into the SVG code?
If you go to my first post - How can I properly add CSS lines into this first code I quoted? Can you show me an example?
Anyway - Thanks man! You're big help!

[pandy]

You already have a style block with a single line of CSS there. Just slop it in there.

CODE

...
<?xml-stylesheet href="des.css" type="text/css"?>
<style type="text/css">
.st0{fill:#251F11;}

/* Put the CSS for the SVG here */

</style>
<path id="upgear" class="st0" d="M409.6,369.4v-36l-20.9-7c-2.6-11-7-21.8-13.1-31.7l9.9-19.7L360,249.6l-19.7,9.9
...

Like so.

CODE

...
<?xml-stylesheet href="des.css" type="text/css"?>
<style type="text/css">
.st0{fill:#251F11;}

@keyframes move {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

#upgear {
animation-name: move;
animation-duration: 15.5s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
display: inline-block;
}

</style>
<path id="upgear" class="st0" d="M409.6,369.4v-36l-20.9-7c-2.6-11-7-21.8-13.1-31.7l9.9-19.7L360,249.6l-19.7,9.9
...

[slokarij]

Great! Thanks for your time

[pandy]

Didn't it work out? I see no rotation.

[slokarij]

Check now!

[pandy]

Wee! It moves!

Not in the browser I checked with first though, the goanna based K-Meleon. Strange, because if I load the SVG directly it swirls. I even emptied the cache. Oh well, that browser is experimental and used by few. Works in the big ones.

[slokarij]

I checked it on: Chrome, Edge, Blisk, IE, Samsung TV browser, Playstation browser, Xiaomi browser. Works everewhere except Internet Explorer I guess it's enough

[pandy]

Yup.