Related
I have two svg icons, and i want to change from one to another in html when holding mouse pointer over, but am i quite new with icons, can somebody help?
I want to make the white icon become black when pointing at it with my mouse.
I am trying to make a "setting icon" with a link ;)
I have the svg code here:
<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="532px" viewBox="0 0 56 532" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
.st0 {
fill: #393B3D;
}
.st1 {
fill: #7B7C7D;
}
.st2 {
fill: #767879;
}
</style>
<g id="settings-on_1_">
<path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9
c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0
l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2
c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2
c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4
l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
S45.3,104,42,104z"></path>
</g>
<g id="settings_1_">
<g>
<path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105
c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6
l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87
c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4
l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9
c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5
C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4
l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8
c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1
c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4
l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8
c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1
c0.5,0.1,0.8,0.5,0.8,1V108z"></path>
</g>
<g>
<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4
S16.2,94,14,94z"></path>
</g>
</g>
</svg>
I've putted the icons in a defs element. Also since the elements, as you draw them, have a different position on the svg canvas, I'm translaling them back to the same position. I'm using the first icon with a <use> element. Next I'm using javascript in order to change the value of the xlink:href on mouseover and mouseleaave. I hope it helps
const SVG_XLINK = "http://www.w3.org/1999/xlink";
navigation.addEventListener("mouseover",(e)=>{
elUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#settings_on_1_');
})
navigation.addEventListener("mouseleave",(e)=>{
elUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#settings_1_');
})
body{background:white;}
svg{border:solid}
<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" viewBox="0 0 24 24" >
<style type="text/css">
.st0 {
fill: #393B3D;
}
.st1 {
fill: #7B7C7D;
}
.st2 {
fill: #767879;
}
</style>
<defs>
<g id="settings_on_1_" transform="translate(-30,-86)">
<path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9
c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0
l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2
c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2
c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4
l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
S45.3,104,42,104z"></path>
</g>
<g id="settings_1_" transform="translate(-2,-86)">
<g>
<path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105
c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6
l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87
c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4
l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9
c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5
C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4
l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8
c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1
c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4
l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8
c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1
c0.5,0.1,0.8,0.5,0.8,1V108z"></path>
</g>
<g>
<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4
S16.2,94,14,94z"></path>
</g>
</g>
</defs>
<use id="elUse" xlink:href="#settings_1_" />
</svg>
You can just use one svg, and then use svg:hover and the color you want it to show when you point the mouse over it.
svg:hover {
fill: red/black/...;
}
enter link description here
Please refer to above example and pass your image dynamically !!
<!DOCTYPE html>
<html>
<body>
<img onmouseover="changeImg(this)" id="myImage" onmouseout="normalImg(this)" border="0" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="62" height="62">
<p>On Image hover Example</p>
<script>
var image = document.getElementById('myImage');
function changeImg(x) {
image.src = "https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_1280.png";
}
function normalImg(x) {
image.src = "https://www.w3schools.com/jsref/smiley.gif";
}
</script>
</body>
</html>
Please try to change to SVG i have done for the PNG .
Step to Do.
Try to implement onHover Event
Implement two function onHover and normal Function
Now Add permanent Image to Normal Function by getting Id using document.getElementById('myImage')
Same do for the other image
<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="532px" viewBox="0 0 56 532" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
.st0 {
fill: #393B3D;
}
.st1 {
fill: #7B7C7D;
}
.st2 {
fill: #767879;
}
</style>
<g id="settings-on_1_">
<path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9
c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0
l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2
c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2
c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4
l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
S45.3,104,42,104z"></path>
</g>
<g id="settings_1_">
<g>
<path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105
c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6
l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87
c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4
l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9
c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5
C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4
l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8
c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1
c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4
l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8
c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1
c0.5,0.1,0.8,0.5,0.8,1V108z"></path>
</g>
<g>
<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4
S16.2,94,14,94z"></path>
</g>
</g>
</svg>
Here is the new code you asked for "johannchopin" setting_1_
<style type="text/css">
</style>
<g id="settings_1_" transform="translate(-2,-86)">
<g>
<path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105 c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6 l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87 c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4 l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9 c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5 C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4 l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8 c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1 c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4 l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8 c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1 c0.5,0.1,0.8,0.5,0.8,1V108z"/>
</g>
<g>
<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4 S16.2,94,14,94z"/>
</g>
</g>
<use id="elUse" xlink:href="#settings_1_"/>
</svg> ```And here is setting_on_1.svg ```<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="navigation" x="1px" y="1px" width="27px" height="27px" viewBox="0 0 1 9,5" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">
<g id="settings-on_1_">
<g transform="translate(-29,-85)" id="settings_on_1_">
<path id="setting" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9 c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0 l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2 c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2 c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4 l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6 S45.3,104,42,104z"/>
</g></g></svg>```
I am trying to get an SVG to display in a HTML webpage, but I must be missing something.
I have a svg file called logo-a.svg this is the code for it:
<svg x="0px" y="0px" width="197px" height="71px" viewbox="0 0 346 51">
<style type="text/css">
.Arched_x0020_Green{fill:url(#SVGID_1_);stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:1;}
.st0{fill:#008751;}
.st1{fill:#FFFFFF;}
.st2{fill:#F9FBFB;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-32.7222" y1="228.6171" x2="-32.0151" y2="227.9099">
<stop offset="0" style="stop-color:#20AC4B"/>
<stop offset="0.9831" style="stop-color:#19361A"/>
</linearGradient>
<rect y="-0.1" class="st0" width="315.63" height="59.33"/>
<g>
<path class="st1" d="M289.44,54.22c-1.58,1.58-4.15,1.58-5.73,0l-22.21-22.21c-1.58-1.58-1.58-4.15,0-5.73L283.7,4.06
c1.58-1.58,4.15-1.58,5.73,0l22.21,22.21c1.58,1.58,1.58,4.15,0,5.73L289.44,54.22z"/>
<path class="st1" d="M68.19,30.39c0-8.81,5.82-20.2,21.28-20.2c12.83,0,20.82,7.47,20.82,19.27c0,11.8-8.24,21.12-21.33,21.12
C74.17,50.59,68.19,39.51,68.19,30.39z M103.08,31.37c0-11.54-6.65-18.7-15.1-18.7c-5.93,0-12.68,3.3-12.68,16.13
c0,10.72,5.92,19.22,15.82,19.22C94.73,48.01,103.08,46.26,103.08,31.37z"/>
<path class="st2" d="M13.81,36.42c-0.26,0-0.36,0.1-0.46,0.41l-2.78,7.37c-0.52,1.29-0.77,2.53-0.77,3.14c0,0.93,0.46,1.6,2.06,1.6
h0.77c0.62,0,0.77,0.1,0.77,0.41c0,0.41-0.31,0.51-0.87,0.51c-1.65,0-3.86-0.15-5.46-0.15c-0.57,0-3.4,0.15-6.08,0.15
C0.31,49.87,0,49.76,0,49.35c0-0.31,0.21-0.41,0.62-0.41c0.47,0,1.18-0.05,1.6-0.1c2.37-0.31,3.35-2.06,4.38-4.64l12.93-32.36
c0.62-1.49,0.93-2.06,1.44-2.06c0.46,0,0.77,0.46,1.29,1.65c1.24,2.83,9.48,23.86,12.78,31.69c1.96,4.64,3.45,5.36,4.53,5.62
c0.77,0.15,1.55,0.21,2.16,0.21c0.41,0,0.67,0.05,0.67,0.41c0,0.41-0.46,0.51-2.37,0.51c-1.86,0-5.62,0-9.74-0.11
c-0.93-0.05-1.55-0.05-1.55-0.41c0-0.31,0.21-0.41,0.72-0.47c0.36-0.1,0.72-0.56,0.46-1.18l-4.12-10.92
c-0.1-0.26-0.26-0.36-0.52-0.36H13.81z M24.32,33.84c0.26,0,0.31-0.16,0.26-0.31L19.94,20.8c-0.05-0.21-0.1-0.46-0.26-0.46
c-0.15,0-0.26,0.26-0.31,0.46l-4.74,12.68c-0.05,0.21,0,0.36,0.21,0.36H24.32z"/>
<path class="st1" d="M29.14,49.76c-0.9-0.07,3.01-0.17,3.01-1.3c0-2.83-2.31-9.34-2.26-10.16c0.05-0.77,0.2-1.34,0.62-1.34
c0.46,0,0.52,0.46,0.52,0.88c0,0.67,0.22-0.97,0.55-0.11c3.6,9.41,13.99,10.96,19.98,10.39c4.62-0.44,6.9-3.14,6.9-5.87
c0-2.52-0.77-4.89-5.05-8.24l-2.37-1.86c-5.67-4.43-7.63-8.04-7.63-12.21c0-5.67,4.74-9.74,11.9-9.74c3.35,0,5.51,0.52,6.85,0.88
c0.46,0.1,0.72,0.26,0.72,0.62c0,0.67-0.21,2.17-0.21,6.19c0,1.13-0.15,1.55-0.57,1.55c-0.36,0-0.51-0.31-0.51-0.93
c0-0.47-0.26-2.06-1.34-3.4c-0.77-0.98-2.27-2.53-5.62-2.53c-3.81,0-6.13,2.22-6.13,5.31c0,2.37,1.19,4.17,5.46,7.42l1.44,1.08
c6.23,4.69,8.45,8.25,8.45,13.14c0,2.99-1.13,6.54-4.84,8.96c-2.58,1.65-5.46,2.11-8.19,2.11C47.84,50.59,31.33,49.94,29.14,49.76z
"/>
<path class="st1" d="M115.85,25.85c0-7.83,0-9.27-0.1-10.92c-0.11-1.75-0.52-2.58-2.22-2.94c-0.41-0.1-1.29-0.15-2.01-0.15
c-0.57,0-0.88-0.1-0.88-0.46c0-0.36,0.36-0.46,1.13-0.46c2.73,0,5.98,0.15,7.06,0.15c1.75,0,5.67-0.15,7.26-0.15
c3.25,0,6.7,0.31,9.48,2.22c1.45,0.98,3.51,3.61,3.51,7.06c0,3.81-1.6,7.32-6.8,11.54c4.58,5.77,8.14,10.35,11.18,13.55
c2.89,2.99,5,3.35,5.77,3.5c0.57,0.1,1.03,0.16,1.44,0.16c0.41,0,0.62,0.16,0.62,0.41c0,0.41-0.36,0.51-0.98,0.51h-4.89
c-2.89,0-4.18-0.26-5.51-0.98c-2.22-1.18-4.17-3.61-7.06-7.57c-2.06-2.84-4.43-6.34-5.1-7.11c-0.26-0.31-0.57-0.36-0.93-0.36
l-4.48-0.1c-0.26,0-0.41,0.1-0.41,0.41v0.72c0,4.79,0,8.87,0.26,11.03c0.15,1.49,0.46,2.63,2.01,2.84c0.77,0.1,1.9,0.21,2.52,0.21
c0.41,0,0.62,0.16,0.62,0.41c0,0.36-0.36,0.51-1.03,0.51c-2.99,0-6.8-0.15-7.57-0.15c-0.98,0-4.23,0.15-6.29,0.15
c-0.67,0-1.03-0.15-1.03-0.51c0-0.26,0.2-0.41,0.82-0.41c0.77,0,1.39-0.1,1.86-0.21c1.03-0.21,1.29-1.34,1.49-2.84
c0.26-2.16,0.26-6.23,0.26-10.97V25.85z M121.93,29.93c0,0.57,0.1,0.77,0.46,0.93c1.08,0.36,2.63,0.52,3.92,0.52
c2.06,0,2.73-0.21,3.66-0.88c1.54-1.14,3.04-3.5,3.04-7.73c0-7.32-4.85-9.43-7.88-9.43c-1.29,0-2.21,0.05-2.73,0.21
c-0.36,0.1-0.46,0.31-0.46,0.72V29.93z"/>
<path class="st1" d="M144.82,30.39c0-8.81,5.82-20.2,21.28-20.2c12.83,0,20.82,7.47,20.82,19.27c0,11.8-8.24,21.12-21.33,21.12
C150.8,50.59,144.82,39.51,144.82,30.39z M179.7,31.37c0-11.54-6.65-18.7-15.1-18.7c-5.93,0-12.68,3.3-12.68,16.13
c0,10.72,5.93,19.22,15.82,19.22C171.36,48.01,179.7,46.26,179.7,31.37z"/>
<g>
<g>
<path class="st1" d="M272.7,48.93c-0.63,0-1.65-0.15-3.21-0.77c-2.79-1.09-5.12-3.41-7.39-5.58
c-2.01-1.91-10.67-11.2-12.56-13.67l-0.07-0.05c-0.62,0.81-1.84,2.3-3.55,4.14c2.16,2.71,9.62,11.53,11.74,13.4
c2.22,1.97,3.62,3.1,6.41,3.36c1.09,0.11,2.02,0.11,3.56,0.11h4.51c0.98,0,1.24-0.15,1.24-0.52
C273.37,49.04,273.07,48.93,272.7,48.93z"/>
</g>
<path class="st1" d="M243.64,30.23h-0.26v2.55c0.42-0.44,0.83-0.87,1.2-1.28c-0.17-0.21-0.3-0.38-0.38-0.49L243.64,30.23z"/>
<path class="st1" d="M228.24,43.22c-2.75,1.51-7.52,4.34-14.47,4.37c-6.9,0.03-16.23-6.08-16.23-18.34c0-5,0.98-9.89,4.74-13.34
c2.27-2.06,5.21-3.19,9.69-3.19c4.74,0,8.76,1.39,10.46,3.19c1.29,1.34,1.96,3.14,2.01,4.74c0,0.72,0.1,1.13,0.52,1.13
c0.46,0,0.56-0.41,0.62-1.19c0.11-1.03,0.05-3.86,0.16-5.57c0.1-1.8,0.26-2.42,0.26-2.83c0-0.31-0.2-0.57-0.77-0.62
c-1.54-0.15-3.19-0.62-5.15-0.88c-2.37-0.31-4.28-0.52-7.47-0.52c-7.68,0-12.57,2.06-16.28,5.46c-4.95,4.54-6.03,10.62-6.03,14.12
c0,5,1.34,10.77,6.39,15.2c4.69,4.07,10.63,6.08,17.67,5.62c7.93-0.52,16.29-6.13,22.77-11.78c0-0.77,0.01-1.57,0.01-2.39
C234.24,39.16,231.24,41.58,228.24,43.22z"/>
<path class="st1" d="M243.17,26.32h-0.24v-2.18c0-7.52,0-7.79,0.1-9.37c0.1-1.73,0.5-2.57,1.83-2.82c0.59-0.1,0.89-0.15,1.38-0.15
c0.4,0,0.69-0.1,0.69-0.45c0-0.34-0.35-0.44-1.04-0.44c-1.68,0-4.8,0.15-5.98,0.15c-1.19,0-4.3-0.15-6.92-0.15
c-0.74,0-1.09,0.1-1.09,0.44c0,0.35,0.29,0.45,0.84,0.45c0.69,0,1.54,0.05,1.93,0.15c1.63,0.35,2.03,1.14,2.13,2.82
c0.1,1.58,0.1,1.86,0.1,9.37v8.71c0,0.49,0,0.41,0,0.88C241.55,29.25,244.09,25.32,243.17,26.32z"/>
<g>
<path class="st1" d="M237.47,41.41c-0.02,2.93-0.07,3.12-0.25,4.62c-0.2,1.44-0.45,2.54-1.44,2.74c-0.45,0.1-1.05,0.2-1.79,0.2
c-0.6,0-0.8,0.15-0.8,0.4c0,0.35,0.35,0.5,1,0.5c1.99,0,5.13-0.15,6.28-0.15c1.24,0,4.38,0.15,7.18,0.15
c0.54,0,0.95-0.15,0.95-0.5c0-0.25-0.25-0.4-0.65-0.4c-0.65,0-1.74-0.1-2.44-0.2c-1.25-0.2-1.7-1.3-1.8-2.69
c-0.15-2.14-0.15-6.08-0.15-10.67v0.17C241.85,37.37,239.79,39.39,237.47,41.41z"/>
</g>
<path class="st1" d="M254.09,17.15c-0.85,0.95-2.52,2.7-4.3,4.56c-3.38,4.44-7.83,10.05-12.68,14.71c0,0.82,0,1.62-0.01,2.39
c2.4-2.09,4.53-4.18,6.29-6.03v-2.55h0.26l0.57,0.77c0.08,0.11,0.21,0.28,0.38,0.49c2.42-2.63,3.89-4.53,3.98-4.77
C248.78,26.17,252.11,20.62,254.09,17.15z"/>
<path class="st1" d="M248.18,27.4c1.76-1.85,9.54-9.58,11.13-11.13c2.22-2.16,3.97-3.25,5.57-3.86c0.98-0.36,2.27-0.57,2.99-0.57
c0.51,0,0.77-0.1,0.77-0.46c0-0.36-0.36-0.46-0.88-0.46c-1.6,0-4.43,0.15-6.03,0.15c-1.39,0-4.23-0.15-5.31-0.15
c-0.57,0-0.82,0.1-0.82,0.46c0,0.31,0.2,0.41,0.67,0.52c0.52,0.1,0.72,0.46,0.72,1.03c0,0.88-1.13,2.16-2.58,3.86
c-0.09,0.1-0.2,0.23-0.33,0.37c-1.98,3.47-5.3,9.02-5.51,9.57c-0.02,0.07-0.18,0.3-0.45,0.65l0.07,0.05
C248.19,27.41,248.19,27.4,248.18,27.4z"/>
</g>
<path class="st0" d="M269.57,31.17c1.44,0.11,2.81,0.4,4.23,0.51c4.83,0.36,9.84,0,14.55,0c2.54,0,5.04,0,7.45,0
c2.23,0,4.75,0.48,6.6-0.85c0-0.34,0-0.68,0-1.02c-3.06-4.04-13.16-4.06-21.15-4.06c-1.2,0-2.55-0.05-3.72,0
c-1.24,0.06-2.63-0.03-3.39,0.17c-0.81,0.21-1.85,1.85-2.71,2.2c-2.24,0.93-6.39,0.38-9.47,0.51c-1.13,0.05-2.29,0.07-3.44,0.08
c0.46,0.57,1.16,1.37,1.98,2.3C263.55,30.9,266.61,30.95,269.57,31.17z"/>
<path class="st0" d="M270.82,20.5c2.94,0,6.47-0.57,8.8,0.17c1.15,0.36,1.73,1.51,2.88,2.03c1.11,0.5,2.65,0.79,4.23,0.85
c4.78,0.16,9.63-0.8,14.21-1.18c-4.03-0.6-9.61,0.37-13.37-0.51c0.6-0.93,1.98-0.61,3.04-0.67c3.1-0.19,7.23-0.16,10.32-0.51
c-1.19-0.67-3.06-0.26-4.91-0.34c-2.87-0.12-6.06,0-8.46-0.51c0.27-0.66,1.13-0.61,1.69-0.68c3.4-0.39,8.29,0.41,11.68-0.17
c-0.84-0.52-2.14-0.46-3.39-0.51c-2.24-0.08-5.09,0.03-7.61-0.17c-0.77-0.06-2.02-0.01-2.37-0.85c4.04-0.67,8.73,0.08,13.37-0.17
c-0.3-0.57-1.15-0.43-1.69-0.51c-1.69-0.24-3.6-0.35-5.58-0.51c-3.73-0.29-7.91-0.85-10.83,0.34c-1.17,0.48-2.44,1.93-3.56,2.2
c-1.15,0.28-2.97,0.15-4.4,0.17c-2.41,0.04-4.69,0.03-6.92-0.02c-0.48,0.48-1.03,1.02-1.6,1.59
C267.84,20.52,269.33,20.5,270.82,20.5z"/>
<path class="st0" d="M296.33,35.11c-3.52-1.94-9.5-2.63-13.03-0.34c-1.33,0.86-2.26,2.74-3.73,3.22c-1.09,0.36-2.88,0.28-4.4,0.34
c-2.6,0.11-5.37,0.02-8.03-0.14c0.6,0.63,1.13,1.16,1.52,1.55c2.27-0.03,4.56,0,6.86,0.11c1.65,0.08,3.05-0.12,4.23,0.34
c1.52,0.59,2.35,2.55,3.89,3.38c3.54,1.91,9.29,1.21,12.69-0.67c1.71-0.95,3.38-2.1,3.38-3.89
C299.71,36.92,297.62,35.82,296.33,35.11z"/>
</g>
</svg>
Then I have a page in my website trying to display it like this:
<div class="brand-logo">
<object id="svg1" data="/images/logo-a.svg" type="image/svg+xml"></object>
</div>
What am I doing wrong? The SVG was created in illustrator, not sure if that makes any difference though.
Your svg is not real svg, just an xml file while you don't declare its namespace
<svg x="0px" y="0px" width="197px" height="71px" viewbox="0 0 346 51"
xmlns="http://www.w3.org/2000/svg"
>
I am trying to make a hover effect which will spin the three different cog svg icon to its respected centre origin. I tried using transform-origin as centre but no luck. Any help would be appreciated. Here is my code below.
.cog--middle {
transform: rotate(0deg);
transition: 0.3s;
transform-origin: center center;
}
svg:hover .cog--middle {
transform: rotate(360deg);
}
<svg
width="110px"
height="100px"
viewBox="0 0 110 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>ic--rollout</title>
<g class="cog--middle">
<path
d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z"
fill="#1B385C"
id="wheel"
/>
</g>
<g class="cog--left">
<path
d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z"
fill="#1B385C"
id="wheel-copy"
/>
</g>
<g class="cog--right">
<path
d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z"
fill="#1B385C"
id="wheel-copy-2"
/>
</g>
</svg>
Gears can be drawn in a vector editor. But while it is difficult to find the exact center of rotation of the gear.
In case of inaccurate indication of the center of rotation, the gear will rotate with a bean,
I decided to first select the center of rotation - 100,100px and create a gear around it.
Draw the outer contour of the gear
When the radius of the circle R = 60px the circumference will be
C=2*Pi*R≈2*3.1415927*60 = 376.98
Find out the length of the sector in the presence of 24 gear teeth 376,98 / 24 = 15,71
Formula stroke-dasharray = "7.85 7.85"
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<!-- big gear -->
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
</svg>
Create the spokes of the gear
Draw lines with markers at the ends
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
</defs
<!-- big gear -->
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
</svg>
Clone jumpers and turn to different angles
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
</defs
<!-- big gear -->
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
</svg>
Animate the rotation of the gear
<animateTransform
attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
</defs
<!-- big gear -->
<g>
<animateTransform
attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 7.85 7.85; stroke-width: 10px;" />
</g>
</svg>
Similarly, we create a small gear. Add rotation control buttons
A pair of gears ready
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
<marker id="MarkerArrow2" viewBox="0 0 20 20" refX="3" refY="3.5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="7" rx="2" fill="grey"/>
</marker>
<line id="line2" x1="168.5" y1="100" x2="211.5" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow2);
marker-start: url(#MarkerArrow2);
stroke:grey; stroke-width:3.5; ">
</line>
</defs>
<!-- big gear -->
<g id="Big_Gear">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
</g>
</g>
<!-- small gear -->
<g id="Small_Gear" transform="rotate(20 100 100)">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 190 100" to="-360 190 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line2" transform="rotate(0 190 100)"/>
<use xlink:href="#line2" transform="rotate(120 190 100)"/>
<use xlink:href="#line2" transform="rotate(240 190 100)"/>
<circle cx="190" cy="100" r="7.5" style="stroke: grey; fill:none; stroke-width: 3px;" />
<circle cx="190" cy="100" r="25" style="stroke: grey; fill:none; stroke-width: 6px;" />
<circle cx="190" cy="100" r="30" style="stroke: grey; fill:none; stroke-dasharray: 5 5; stroke-width: 5px;" />
</g>
</g>
<g transform = "translate(-20,-160)">
<g id="gO1">
<rect x="35" y="165" height="20" width="60" rx="5" fill="green"/>
<text x="50" y="181" font-size="18" fill="white">GO</text>
</g>
<g id="stop1">
<rect x="100" y="165" height="20" width="60" rx="5" fill="red"/>
<text x="105" y="181" font-size="18" fill="white">STOP</text>
</g>
</g>
</svg>
Three gears
Gears can be cloned using the command -
<use xlink:href="#Small_Gear" />
<svg width="250" height="250" version="1.1"
viewBox="0 0 250 250" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="grey"/>
</marker>
<!-- gear jumpers -->
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:grey; stroke-width:6; ">
</line>
<marker id="MarkerArrow2" viewBox="0 0 20 20" refX="3" refY="3.5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="7" rx="2" fill="grey"/>
</marker>
<line id="line2" x1="168.5" y1="100" x2="211.5" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow2);
marker-start: url(#MarkerArrow2);
stroke:grey; stroke-width:3.5; ">
</line>
</defs>
<g id="two gears" transform="translate(25 0)">
<!-- big gear -->
<g id="Big_Gear">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: grey; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: gray; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: gray; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
</g>
</g>
<!-- small gear -->
<g id="Small_Gear" transform="rotate(20 100 100)">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 190 100" to="-360 190 100"
begin="gO1.click" end="stop1.click" dur="7s"
repeatCount="indefinite" fill="freeze"
/>
<use xlink:href="#line2" transform="rotate(0 190 100)"/>
<use xlink:href="#line2" transform="rotate(120 190 100)"/>
<use xlink:href="#line2" transform="rotate(240 190 100)"/>
<circle cx="190" cy="100" r="7.5" style="stroke: grey; fill:none; stroke-width: 3px;" />
<circle cx="190" cy="100" r="25" style="stroke: grey; fill:none; stroke-width: 6px;" />
<circle cx="190" cy="100" r="30" style="stroke: grey; fill:none; stroke-dasharray: 5 5; stroke-width: 5px;" />
</g>
</g>
</g>
<use xlink:href="#Small_Gear" x="-146" />
<g transform = "translate(-30,-160)">
<g id="gO1">
<rect x="35" y="165" height="20" width="60" rx="5" fill="green"/>
<text x="50" y="181" font-size="18" fill="white">GO</text>
</g>
<g id="stop1">
<rect x="100" y="165" height="20" width="60" rx="5" fill="red"/>
<text x="105" y="181" font-size="18" fill="white">STOP</text>
</g>
</g>
</svg>
Planetary transmission example
.parent{
position: relative;
}
.container{
width: 75%;
height: 75%;
margin: auto;
position: absolute;
top: 0;
left: 0;
}
<div class="parent">
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink='http://www.w3.org/1999/xlink'
viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet"> >
<title>animation planetary mechanism</title>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="#22211D"/>
</marker>
<line id="line1" x1="150" y1="100" x2="60" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:#22211D; stroke-width:6; ">
</line>
<marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<rect width="7" height="3.5" rx="2" fill="#22211D"/>
</marker>
<line id="line-s" x1="175" y1="100" x2="202" y2="100"
style=" fill:none;
marker-end: url(#MarkerArrow-s1);
marker-start: url(#MarkerArrow-s);
stroke:#22211D; stroke-width:2; " >
</line>
<linearGradient id="vertical"
x2="0%" y2="100%"
spreadMethod="pad" >
<stop offset="0%" stop-color="powderblue"/>
<stop offset="100%" stop-color="lightgreen"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#vertical)" />
<g transform = "translate(300,60)" >
<g id="wheel">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="gO1.click" end="stop1.click" dur="14s"
repeatCount="indefinite"
/>
<use xlink:href="#line1" transform="rotate(0 100 100)"/>
<use xlink:href="#line1" transform="rotate(120 100 100)"/>
<use xlink:href="#line1" transform="rotate(240 100 100)"/>
<circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none; stroke-width: 4px;" />
<circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none; stroke-width: 15px;" />
<circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6; stroke-width: 10px;" />
<circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
</g>
</g>
<g id="col-small">
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 188 100" to="-360 188 100"
begin="gO1.click" end="stop1.click" dur="3.5s"
repeatCount="indefinite"
/>
<use xlink:href="#line-s" transform="rotate(0 188 100)"/>
<use xlink:href="#line-s" transform="rotate(120 188 100)"/>
<use xlink:href="#line-s" transform="rotate(240 188 100)"/>
<circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none; stroke-width: 4px;" />
<circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none; stroke-width: 7px;" />
<circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" />
<circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
</g>
</g>
<g id="planetar" >
<g>
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="-360 100 100"
begin="gO1.click" end="stop1.click" dur="28s"
repeatCount="indefinite"
/>
<circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5; stroke-width: 10px;" />
<circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none; stroke-width: 12px;" />
<circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />
</g>
</g>
<g >
<use xlink:href="#col-small" transform="rotate(240 100 100)" />
<use xlink:href="#col-small" transform="rotate(120 100 100)" />
</g>
<g transform = "translate(0,120)">
<g id="gO1">
<rect x="45" y="115" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue"/>
<text x="62" y="132" font-size="16" fill="yellow">GO</text>
</g>
<g id="stop1">
<rect x="110" y="115" height="22" width="60" rx="5" fill="crimson" stroke="red"/>
<text x="120" y="132" font-size="16" fill="yellow" >STOP</text>
</g>
</g>
</g>
</svg>
</div>
</div>
Considering that you are trying to avoid using transform-box, one way to achieve the desired result is playing around with the transform-origin property using percentage values
.cog--middle {
transform: rotate(0deg);
transition: 0.3s;
transform-origin: 47% 34%;
}
svg:hover .cog--middle {
transform: rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<svg width="110px" height="100px" viewBox="0 0 110 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ic--rollout</title>
<g class="cog--middle">
<path d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z" fill="#1B385C" id="wheel"></path>
</g>
<g class="cog--left">
<path d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z" fill="#1B385C" id="wheel-copy"></path>
</g>
<g class="cog--right">
<path d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z" fill="#1B385C" id="wheel-copy-2"></path>
</g>
</svg>
</body>
</html>
Basically, there are many ways you can solve this problem. I won't cover all of them, but here are some in order of effectiveness:
1) Just use separate SVG objects
If you going to animate different parts of pure SVG (no libraries like Snap.svg) with pure CSS - don't mix everything in one single SVG object. Instead, create 3 objects, each one with separate viewBox. That way you'll have total control over it with CSS animations
svg path {
transform: rotate(0deg);
transition: 3s;
transform-origin: center center;
}
svg:hover path {
transform: rotate(360deg);
}
.cog--middle {
position: absolute;
width: 68.8px;
height: 67.71px;
left: 17px;
top: 0px;
}
.cog--left {
position: absolute;
width: 40.03px;
height: 38.8px;
left: 0px;
top: 60px;
}
.cog--right {
position: absolute;
width: 40.03px;
height: 38.8px;
left: 70px;
top: 55px;
}
<svg class="cog--middle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 68.8 67.71" style="enable-background:new 0 0 68.8 67.71;" xml:space="preserve">
<path id="wheel1" fill="#1B395D" d="M15.82,13.87c1.75-1.59,3.7-2.97,5.81-4.07l-1.67-7.05L27.69,0l3.58,6.85c1.02-0.11,2.05-0.17,3.1-0.17c1.26,0,2.51,0.09,3.73,0.25l2.55-6.78l7.95,2.04l-0.89,7.93c1.79,0.99,3.45,2.18,4.97,3.53l8-3.29l3.93,7.2l-5.68,4.22c0.05,0.09,0.09,0.18,0.14,0.28c1.03,2.09,1.8,4.33,2.27,6.68l7.48,1l-0.2,8.2l-7.12,0.82c-0.38,2.26-1.03,4.43-1.93,6.46L64.81,51l-5.43,6.15l-5.49-3.62c-0.21,0.21-0.42,0.41-0.63,0.62c-1.56,1.47-3.29,2.77-5.15,3.85l1.12,7.64l-7.94,2.07l-2.64-6.36c-0.36,0.06-0.73,0.11-1.1,0.15c-1.05,0.12-2.11,0.18-3.19,0.18c-1.09,0-2.17-0.06-3.23-0.19l-2.37,5.97l-7.91-2.18l0.87-6.67c-0.19-0.1-0.38-0.2-0.56-0.3c-2.14-1.17-4.1-2.62-5.85-4.29L8.71,57.3l-4.42-6.91l5.2-4.45c-1.05-2.22-1.82-4.61-2.24-7.11L0,37.84l0.2-8.2l7.19-0.83c0.44-2.23,1.15-4.37,2.1-6.37c0.07-0.14,0.13-0.28,0.2-0.42l-5.88-4.87l4.52-6.85L15.82,13.87z M34.36,53.83C45.21,53.83,54,45.03,54,34.18s-8.79-19.64-19.64-19.64s-19.64,8.79-19.64,19.64S23.51,53.83,34.36,53.83z"/>
</svg>
<svg class="cog--left" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40.03 38.8" style="enable-background:new 0 0 40.03 38.8;" xml:space="preserve">
<path id="wheel2" fill="#1B395D" d="M34.48,12.91c0.57,1.23,0.98,2.54,1.21,3.89l4.18,0.36l0.15,4.69l-4.41,0.71c-0.12,0.57-0.27,1.14-0.45,1.71c-0.22,0.69-0.49,1.35-0.8,1.98l3.28,2.61L35.1,32.8l-4.21-1.91c-0.87,0.79-1.82,1.48-2.83,2.06l0.4,4.94l-4.67,0.83l-1.32-3.84c-0.06,0.01-0.12,0.02-0.18,0.03c-1.33,0.18-2.71,0.19-4.08,0.03l-1.88,3.88l-4.49-1.59l0.81-4.01c-1.18-0.61-2.26-1.36-3.22-2.21L5.31,32.8l-2.43-4.05l2.97-2.32c-0.08-0.15-0.15-0.3-0.23-0.45c-0.54-1.11-0.94-2.28-1.21-3.49L0,21.7l0.27-4.68l3.98-0.29c0.03-0.21,0.07-0.41,0.11-0.62c0.12-0.59,0.27-1.18,0.47-1.76c0.19-0.59,0.42-1.16,0.68-1.72l-2.87-2.36l2.61-3.9l3.52,1.67c0.09-0.08,0.18-0.17,0.26-0.25c1.03-0.95,2.17-1.75,3.41-2.4l-0.63-4.18l4.6-1.15l1.53,3.63c1.41-0.17,2.87-0.15,4.32,0.07L24.07,0l4.49,1.59l-0.82,4.05c1.15,0.64,2.2,1.41,3.14,2.29c0.07,0.06,0.13,0.12,0.19,0.18L34.8,5.8l2.98,3.69L34.48,12.91z M9.16,15.76c-1.93,5.89,1.36,12.25,7.35,14.2c5.98,1.96,12.39-1.23,14.32-7.12c1.93-5.89-1.36-12.25-7.35-14.2C17.49,6.69,11.08,9.88,9.16,15.76z"/>
</svg>
<svg class="cog--right" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40.03 38.8" style="enable-background:new 0 0 40.03 38.8;" xml:space="preserve">
<path id="wheel2" fill="#1B395D" d="M34.48,12.91c0.57,1.23,0.98,2.54,1.21,3.89l4.18,0.36l0.15,4.69l-4.41,0.71c-0.12,0.57-0.27,1.14-0.45,1.71c-0.22,0.69-0.49,1.35-0.8,1.98l3.28,2.61L35.1,32.8l-4.21-1.91c-0.87,0.79-1.82,1.48-2.83,2.06l0.4,4.94l-4.67,0.83l-1.32-3.84c-0.06,0.01-0.12,0.02-0.18,0.03c-1.33,0.18-2.71,0.19-4.08,0.03l-1.88,3.88l-4.49-1.59l0.81-4.01c-1.18-0.61-2.26-1.36-3.22-2.21L5.31,32.8l-2.43-4.05l2.97-2.32c-0.08-0.15-0.15-0.3-0.23-0.45c-0.54-1.11-0.94-2.28-1.21-3.49L0,21.7l0.27-4.68l3.98-0.29c0.03-0.21,0.07-0.41,0.11-0.62c0.12-0.59,0.27-1.18,0.47-1.76c0.19-0.59,0.42-1.16,0.68-1.72l-2.87-2.36l2.61-3.9l3.52,1.67c0.09-0.08,0.18-0.17,0.26-0.25c1.03-0.95,2.17-1.75,3.41-2.4l-0.63-4.18l4.6-1.15l1.53,3.63c1.41-0.17,2.87-0.15,4.32,0.07L24.07,0l4.49,1.59l-0.82,4.05c1.15,0.64,2.2,1.41,3.14,2.29c0.07,0.06,0.13,0.12,0.19,0.18L34.8,5.8l2.98,3.69L34.48,12.91z M9.16,15.76c-1.93,5.89,1.36,12.25,7.35,14.2c5.98,1.96,12.39-1.23,14.32-7.12c1.93-5.89-1.36-12.25-7.35-14.2C17.49,6.69,11.08,9.88,9.16,15.76z"/>
</svg>
2) DO use transform-box
In most cases that will do the trick. If you need wider browser support - just use separate CSS class for special browsers, like Edge, with pixel-perfect transform-origin property and toggle between classes with JS.
.modern{
transform-origin: 50% 50%;
transform-box: fill-box;
}
.edge{
transform-origin: 52px 34px;
}
3) DO use Snap.svg
This library will let you animate anything with ease. You just sit back and relax.
var s = Snap("#svg"),
gear = s.select('#wheel'),
bbox = gear.getBBox();
gear.transform("rotate(0 "+bbox.cx+" "+bbox.cy+")");
gear.animate({ transform: "rotate(3600 "+bbox.cx+" "+bbox.cy+")"}, 50000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<svg id="svg"
width="110px"
height="100px"
viewBox="0 0 110 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>ic--rollout</title>
<g class="cog--middle">
<path
d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 C56.091817,61.4976526 55.7260194,61.5474549 55.3580085,61.5899901 C54.3111517,61.7109872 53.2463841,61.7731797 52.1670931,61.7731797 C51.0760163,61.7731797 49.9997819,61.7096216 48.9418893,61.5860052 L46.5757103,67.5520122 L38.6662197,65.3720638 L39.5343402,58.7054384 C39.3461507,58.6079107 39.1592312,58.5082724 38.9736132,58.4065544 C36.8360572,57.2351814 34.8710875,55.7880122 33.126567,54.1129174 L26.517699,57.3888051 L22.0982404,50.4754646 L27.2985471,46.0207673 C26.2463138,43.7967471 25.4835451,41.4089702 25.0588838,38.9060872 L17.8061497,37.9334569 L18.0075293,29.7303153 L25.1942049,28.9012511 C25.6358466,26.6699551 26.347362,24.5357377 27.2933125,22.5340431 C27.3591986,22.3946237 27.426222,22.2558471 27.4943708,22.1177255 L21.6159342,17.247506 L26.1330259,10.3975792 L33.6286316,13.9605932 Z M52.1670931,53.9156627 C63.0143367,53.9156627 71.807765,45.1208371 71.807765,34.2718701 C71.807765,23.422903 63.0143367,14.6280775 52.1670931,14.6280775 C41.3198495,14.6280775 32.5264212,23.422903 32.5264212,34.2718701 C32.5264212,45.1208371 41.3198495,53.9156627 52.1670931,53.9156627 Z"
fill="#1B385C"
id="wheel"
/>
</g>
<g class="cog--left">
<path
d="M9.03425644,68.7605395 C10.0306523,67.8355529 11.144758,67.0393549 12.3510762,66.3978604 L11.3954144,62.3090478 L15.8086266,60.7124149 L17.8520661,64.6886069 C18.4321654,64.622562 19.0218215,64.5886439 19.6192718,64.5886439 C20.3413641,64.5886439 21.0520705,64.6381904 21.7482798,64.7341209 L23.205097,60.802547 L27.7422576,61.9871248 L27.2329539,66.5872254 C28.2540962,67.1638264 29.2053388,67.8528186 30.0705033,68.6377594 L34.6392226,66.7273322 L36.8811707,70.9078164 L33.6381501,73.3539124 C33.6647747,73.4074185 33.6911115,73.4610977 33.7171585,73.5149479 C34.3037309,74.7276458 34.7432922,76.0270599 35.0122134,77.3891743 L39.2813439,77.9709696 L39.166361,82.7307046 L35.101985,83.2071781 C34.8853478,84.5186703 34.5113096,85.7759026 34.0002898,86.9581209 L37.0045394,90.3063952 L33.9062494,93.877444 L30.773038,91.7760145 C30.6548909,91.8972245 30.5348448,92.016519 30.4129487,92.1338479 C29.5239058,92.98958 28.5364512,93.7407575 27.4696391,94.3680142 L28.1107394,98.8003777 L23.577407,100 L22.0677085,96.3100908 C21.8601947,96.3431189 21.6513331,96.3720158 21.4412077,96.3966962 C20.8434777,96.4669027 20.235521,96.5029888 19.6192718,96.5029888 C18.9962932,96.5029888 18.3817893,96.4661103 17.7777581,96.394384 L16.4267268,99.8560592 L11.910598,98.5911809 L12.4062739,94.7229835 C12.2988222,94.6663948 12.1920957,94.6085813 12.0861123,94.5495611 C10.8656193,93.8698917 9.74366881,93.0301961 8.74758958,92.0582505 L4.97408501,93.9590292 L2.45068049,89.9476796 L5.41993035,87.3629165 C4.8191306,86.0724661 4.38360801,84.6869987 4.14113665,83.2347429 L-1.53588253e-12,82.6703906 L0.114982882,77.9106556 L4.21840174,77.429605 C4.47056851,76.134933 4.87682672,74.8965892 5.41694166,73.7351396 C5.45456105,73.6542439 5.49282981,73.5737211 5.5317411,73.4935783 L2.17529527,70.6677154 L4.75444596,66.6931605 L9.034257,68.7605397 Z M19.6192718,91.9437967 C25.8127869,91.9437967 30.8336229,86.8407471 30.8336229,80.5458164 C30.8336229,74.2508857 25.8127869,69.147836 19.6192718,69.147836 C13.4257568,69.147836 8.40492079,74.2508857 8.40492079,80.5458164 C8.40492079,86.8407471 13.4257568,91.9437967 19.6192718,91.9437967 Z"
fill="#1B385C"
id="wheel-copy"
/>
</g>
<g class="cog--right">
<path
d="M79.7529126,63.3257569 C80.7493084,62.4007703 81.8634142,61.6045723 83.0697323,60.9630778 L82.1140705,56.8742652 L86.5272828,55.2776323 L88.5707222,59.2538243 C89.1508216,59.1877794 89.7404776,59.1538613 90.337928,59.1538613 C91.0600202,59.1538613 91.7707267,59.2034078 92.4669359,59.2993383 L93.9237532,55.3677644 L98.4609137,56.5523422 L97.95161,61.1524428 C98.9727524,61.7290438 99.9239949,62.418036 100.789159,63.2029768 L105.357879,61.2925496 L107.599827,65.4730338 L104.356806,67.9191298 C104.383431,67.9726359 104.409768,68.0263151 104.435815,68.0801653 C105.022387,69.2928632 105.461948,70.5922773 105.73087,71.9543917 L110,72.536187 L109.885017,77.295922 L105.820641,77.7723956 C105.604004,79.0838877 105.229966,80.3411199 104.718946,81.5233383 L107.723196,84.8716126 L104.624905,88.4426614 L101.491694,86.3412319 C101.373547,86.4624419 101.253501,86.5817363 101.131605,86.6990653 C100.242562,87.5547973 99.2551074,88.3059749 98.1882952,88.9332316 L98.8293956,93.3655951 L94.2960631,94.5652174 L92.7863646,90.8753082 C92.5788508,90.9083363 92.3699893,90.9372332 92.1598639,90.9619135 C91.5621338,91.0321201 90.9541772,91.0682062 90.337928,91.0682062 C89.7149494,91.0682062 89.1004454,91.0313277 88.4964142,90.9596014 L87.145383,94.4212766 L82.6292541,93.1563982 L83.12493,89.2882008 C83.0174784,89.2316122 82.9107518,89.1737987 82.8047684,89.1147785 C81.5842754,88.4351091 80.4623249,87.5954134 79.4662457,86.6234679 L75.6927412,88.5242466 L73.1693366,84.512897 L76.1385865,81.9281339 C75.5377867,80.6376835 75.1022641,79.2522161 74.8597928,77.7999603 L70.7186561,77.235608 L70.833639,72.475873 L74.9370579,71.9948224 C75.1892246,70.7001504 75.5954829,69.4618066 76.1355978,68.300357 C76.1732172,68.2194613 76.2114859,68.1389385 76.2503972,68.0587957 L72.8939514,65.2329328 L75.4731021,61.2583779 L79.7529131,63.3257571 Z M90.337928,86.5090141 C96.531443,86.5090141 101.552279,81.4059645 101.552279,75.1110338 C101.552279,68.816103 96.531443,63.7130534 90.337928,63.7130534 C84.1444129,63.7130534 79.1235769,68.816103 79.1235769,75.1110338 C79.1235769,81.4059645 84.1444129,86.5090141 90.337928,86.5090141 Z"
fill="#1B385C"
id="wheel-copy-2"
/>
</g>
</svg>
4) Make SVG animation
As #Alexandr_T suggested, use pure SVG animation without CSS. This is the same as previous solution, but instead of relaxing - you do the complicated calculations on your own.
I am trying to make a page that has two navs because the ordering and placement of the icons needs to change between mobile and desktop.
I will be duplicating the same inline SVG icons between the navs, though.
Here is a codepen that demonstrates the behavior in Chrome. In safari it seems fine.
https://codepen.io/stephen_marsh/pen/RZaxqO
And because StackOverflow is nagging me, here is the code:
HTML:
<nav class="nav-mobile">
<div class="nav-left">
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="hamburger-a" d="M0.96,-3.55271368e-15 L15.04,-3.55271368e-15 C15.552,-3.55271368e-15 16,0.544352952 16,1.16647061 C16,1.78858827 15.552,2.33294122 15.04,2.33294122 L0.96,2.33294122 C0.448,2.33294122 0,1.78858827 0,1.16647061 C0,0.544352952 0.448,-3.55271368e-15 0.96,-3.55271368e-15 Z M0.96,5.44352952 L15.04,5.44352952 C15.552,5.44352952 16,5.98788247 16,6.61000013 C16,7.23211779 15.552,7.77647075 15.04,7.77647075 L0.96,7.77647075 C0.448,7.77647075 0,7.23211779 0,6.61000013 C0,5.98788247 0.448,5.44352952 0.96,5.44352952 Z M0.96,10.887059 L15.04,10.887059 C15.552,10.887059 16,11.431412 16,12.0535297 C16,12.6756473 15.552,13.2200003 15.04,13.2200003 L0.96,13.2200003 C0.448,13.2200003 0,12.6756473 0,12.0535297 C0,11.431412 0.448,10.887059 0.96,10.887059 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
<g transform="translate(4 5)">
<mask id="hamburger-b" fill="#fff">
<use xlink:href="#hamburger-a"/>
</mask>
<use fill="#9E9E9E" xlink:href="#hamburger-a"/>
<g fill="#424242" mask="url(#hamburger-b)">
<rect width="24" height="24" transform="translate(-4 -5)"/>
</g>
</g>
</g>
</svg>
</button>
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="covers-a" d="M2,9.21052632 L6.21052632,9.21052632 L6.21052632,5 L2,5 L2,9.21052632 L2,9.21052632 Z M2,14.4736842 L6.21052632,14.4736842 L6.21052632,10.2631579 L2,10.2631579 L2,14.4736842 L2,14.4736842 Z M7.26315789,14.4736842 L11.4736842,14.4736842 L11.4736842,10.2631579 L7.26315789,10.2631579 L7.26315789,14.4736842 L7.26315789,14.4736842 Z M12.5263158,14.4736842 L16.7368421,14.4736842 L16.7368421,10.2631579 L12.5263158,10.2631579 L12.5263158,14.4736842 L12.5263158,14.4736842 Z M7.26315789,9.21052632 L11.4736842,9.21052632 L11.4736842,5 L7.26315789,5 L7.26315789,9.21052632 L7.26315789,9.21052632 Z M12.5263158,5 L12.5263158,9.21052632 L16.7368421,9.21052632 L16.7368421,5 L12.5263158,5 L12.5263158,5 Z M17.7894737,14.4736842 L22,14.4736842 L22,10.2631579 L17.7894737,10.2631579 L17.7894737,14.4736842 L17.7894737,14.4736842 Z M2,19.7368421 L6.21052632,19.7368421 L6.21052632,15.5263158 L2,15.5263158 L2,19.7368421 L2,19.7368421 Z M7.26315789,19.7368421 L11.4736842,19.7368421 L11.4736842,15.5263158 L7.26315789,15.5263158 L7.26315789,19.7368421 L7.26315789,19.7368421 Z M12.5263158,19.7368421 L16.7368421,19.7368421 L16.7368421,15.5263158 L12.5263158,15.5263158 L12.5263158,19.7368421 L12.5263158,19.7368421 Z M17.7894737,19.7368421 L22,19.7368421 L22,15.5263158 L17.7894737,15.5263158 L17.7894737,19.7368421 L17.7894737,19.7368421 Z M17.7894737,5 L17.7894737,9.21052632 L22,9.21052632 L22,5 L17.7894737,5 L17.7894737,5 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
<mask id="covers-b" fill="#fff">
<use xlink:href="#covers-a"/>
</mask>
<use fill="#BDBDBD" xlink:href="#covers-a"/>
<g fill="#424242" mask="url(#covers-b)">
<rect width="24" height="24"/>
</g>
</g>
</svg>
</button>
</div>
<div class="nav-right">
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="empty-a" d="M12.96875,1.55555556 C12.734375,1.32222222 11.484375,0.388888889 11.25,0.233333333 C11.015625,-1.77635684e-15 10.625,-1.77635684e-15 10.390625,-1.77635684e-15 L2.96875,-1.77635684e-15 C2.734375,-1.77635684e-15 2.34375,0.0777777778 2.109375,0.233333333 C1.875,0.466666667 0.625,1.4 0.390625,1.55555556 C0.15625,1.78888889 0,2.02222222 0,2.48888889 C0.078125,2.87777778 1.484375,12.4444444 1.484375,12.4444444 C1.5625,12.6777778 1.875,12.9111111 2.109375,12.9111111 L11.171875,12.9111111 C11.40625,12.9111111 11.71875,12.6777778 11.796875,12.4444444 C11.796875,12.4444444 13.203125,2.87777778 13.28125,2.48888889 C13.359375,2.02222222 13.203125,1.71111111 12.96875,1.55555556 L12.96875,1.55555556 Z M10,4.9 C10,4.9 10,5.13333333 9.921875,5.52222222 L9.921875,5.52222222 L9.921875,5.67777778 C9.765625,6.53333333 9.296875,7.31111111 8.59375,7.77777778 C8.046875,8.16666667 7.421875,8.32222222 6.796875,8.32222222 C6.09375,8.32222222 5.46875,8.08888889 5,7.77777778 C4.296875,7.31111111 3.75,6.53333333 3.671875,5.67777778 L3.671875,5.52222222 L3.671875,5.52222222 C3.59375,5.21111111 3.59375,4.9 3.59375,4.9 C3.59375,4.9 3.59375,4.9 3.59375,4.82222222 C3.59375,4.82222222 3.59375,4.82222222 3.59375,4.74444444 C3.59375,4.66666667 3.671875,4.51111111 3.75,4.43333333 C3.828125,4.35555556 3.984375,4.27777778 4.0625,4.27777778 L4.0625,4.27777778 L4.140625,4.27777778 L4.140625,4.27777778 C4.296875,4.27777778 4.453125,4.35555556 4.53125,4.51111111 C4.609375,4.58888889 4.609375,4.66666667 4.609375,4.74444444 C4.609375,4.74444444 4.6875,4.97777778 4.6875,5.28888889 L4.6875,5.44444444 L4.6875,5.44444444 C4.765625,5.83333333 5,6.22222222 5.3125,6.53333333 C5.703125,6.84444444 6.171875,7.07777778 6.71875,7.07777778 C7.265625,7.07777778 7.734375,6.84444444 8.125,6.53333333 C8.4375,6.22222222 8.671875,5.91111111 8.75,5.44444444 L8.75,5.44444444 L8.75,5.28888889 C8.828125,4.97777778 8.828125,4.74444444 8.828125,4.74444444 C8.828125,4.66666667 8.828125,4.58888889 8.90625,4.51111111 C8.984375,4.35555556 9.140625,4.27777778 9.296875,4.27777778 L9.296875,4.27777778 L9.375,4.27777778 L9.375,4.27777778 C9.53125,4.27777778 9.609375,4.35555556 9.6875,4.43333333 C9.765625,4.51111111 9.84375,4.58888889 9.84375,4.74444444 C10,4.82222222 10,4.82222222 10,4.9 L10,4.9 L10,4.9 Z M11.40625,2.1 L11.40625,2.1 L10.703125,2.1 L9.609375,2.1 L7.5,2.1 L5.78125,2.1 L3.671875,2.1 L2.578125,2.1 L2.03125,2.1 L2.03125,2.1 C1.875,2.1 1.796875,2.02222222 1.796875,1.86666667 C1.796875,1.78888889 1.796875,1.71111111 1.875,1.71111111 L1.875,1.71111111 L2.734375,1.08888889 L2.734375,1.08888889 C2.734375,1.08888889 2.734375,1.08888889 2.8125,1.01111111 L2.8125,1.01111111 C2.890625,0.933333333 3.046875,0.855555556 3.203125,0.855555556 L3.203125,0.855555556 L10.078125,0.855555556 L10.078125,0.855555556 C10.234375,0.855555556 10.390625,0.933333333 10.46875,1.01111111 L10.46875,1.01111111 C10.46875,1.01111111 10.46875,1.01111111 10.546875,1.08888889 L10.546875,1.08888889 L11.40625,1.71111111 L11.484375,1.71111111 C11.5625,1.78888889 11.5625,1.78888889 11.5625,1.86666667 C11.640625,1.94444444 11.484375,2.1 11.40625,2.1 L11.40625,2.1 Z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(5 6)">
<mask id="empty-b" fill="#fff">
<use xlink:href="#empty-a"/>
</mask>
<use fill="#BDBDBD" xlink:href="#empty-a"/>
<g fill="#424242" mask="url(#empty-b)">
<rect width="24" height="24" transform="translate(-5 -6)"/>
</g>
</g>
</svg>
</button>
</div>
</nav>
<nav class="nav-desktop">
<div class="nav-left">
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="hamburger-a" d="M0.96,-3.55271368e-15 L15.04,-3.55271368e-15 C15.552,-3.55271368e-15 16,0.544352952 16,1.16647061 C16,1.78858827 15.552,2.33294122 15.04,2.33294122 L0.96,2.33294122 C0.448,2.33294122 0,1.78858827 0,1.16647061 C0,0.544352952 0.448,-3.55271368e-15 0.96,-3.55271368e-15 Z M0.96,5.44352952 L15.04,5.44352952 C15.552,5.44352952 16,5.98788247 16,6.61000013 C16,7.23211779 15.552,7.77647075 15.04,7.77647075 L0.96,7.77647075 C0.448,7.77647075 0,7.23211779 0,6.61000013 C0,5.98788247 0.448,5.44352952 0.96,5.44352952 Z M0.96,10.887059 L15.04,10.887059 C15.552,10.887059 16,11.431412 16,12.0535297 C16,12.6756473 15.552,13.2200003 15.04,13.2200003 L0.96,13.2200003 C0.448,13.2200003 0,12.6756473 0,12.0535297 C0,11.431412 0.448,10.887059 0.96,10.887059 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
<g transform="translate(4 5)">
<mask id="hamburger-b" fill="#fff">
<use xlink:href="#hamburger-a"/>
</mask>
<use fill="#9E9E9E" xlink:href="#hamburger-a"/>
<g fill="#424242" mask="url(#hamburger-b)">
<rect width="24" height="24" transform="translate(-4 -5)"/>
</g>
</g>
</g>
</svg>
</button>
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="covers-a" d="M2,9.21052632 L6.21052632,9.21052632 L6.21052632,5 L2,5 L2,9.21052632 L2,9.21052632 Z M2,14.4736842 L6.21052632,14.4736842 L6.21052632,10.2631579 L2,10.2631579 L2,14.4736842 L2,14.4736842 Z M7.26315789,14.4736842 L11.4736842,14.4736842 L11.4736842,10.2631579 L7.26315789,10.2631579 L7.26315789,14.4736842 L7.26315789,14.4736842 Z M12.5263158,14.4736842 L16.7368421,14.4736842 L16.7368421,10.2631579 L12.5263158,10.2631579 L12.5263158,14.4736842 L12.5263158,14.4736842 Z M7.26315789,9.21052632 L11.4736842,9.21052632 L11.4736842,5 L7.26315789,5 L7.26315789,9.21052632 L7.26315789,9.21052632 Z M12.5263158,5 L12.5263158,9.21052632 L16.7368421,9.21052632 L16.7368421,5 L12.5263158,5 L12.5263158,5 Z M17.7894737,14.4736842 L22,14.4736842 L22,10.2631579 L17.7894737,10.2631579 L17.7894737,14.4736842 L17.7894737,14.4736842 Z M2,19.7368421 L6.21052632,19.7368421 L6.21052632,15.5263158 L2,15.5263158 L2,19.7368421 L2,19.7368421 Z M7.26315789,19.7368421 L11.4736842,19.7368421 L11.4736842,15.5263158 L7.26315789,15.5263158 L7.26315789,19.7368421 L7.26315789,19.7368421 Z M12.5263158,19.7368421 L16.7368421,19.7368421 L16.7368421,15.5263158 L12.5263158,15.5263158 L12.5263158,19.7368421 L12.5263158,19.7368421 Z M17.7894737,19.7368421 L22,19.7368421 L22,15.5263158 L17.7894737,15.5263158 L17.7894737,19.7368421 L17.7894737,19.7368421 Z M17.7894737,5 L17.7894737,9.21052632 L22,9.21052632 L22,5 L17.7894737,5 L17.7894737,5 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
<mask id="covers-b" fill="#fff">
<use xlink:href="#covers-a"/>
</mask>
<use fill="#BDBDBD" xlink:href="#covers-a"/>
<g fill="#424242" mask="url(#covers-b)">
<rect width="24" height="24"/>
</g>
</g>
</svg>
</button>
</div>
<div class="nav-right">
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="search-a" d="M16.3217424,14.8346938 C15.9890463,14.568364 15.7228895,13.9025394 15.9225071,13.5030447 C16.52136,12.3711429 16.7875168,11.1060762 16.5878992,9.70784463 C16.2552031,6.97796389 14.1259486,4.71416034 11.3978413,4.3146656 C7.07279299,3.58225857 3.41313676,7.31087617 4.0785288,11.6387359 C4.54430323,14.3686166 6.74009697,16.4992553 9.46820433,16.8321676 C10.8655276,17.0319149 12.1297725,16.7655851 13.260939,16.166343 C13.593635,15.9665956 14.1924878,16.2329254 14.5251838,16.5658377 L17.519448,19.7617957 C18.1183009,20.4276202 19.1829281,20.3610378 19.7152418,19.6286308 C20.1810162,19.0293886 20.0479378,18.1638167 19.5156241,17.631157 L16.3217424,14.8346938 L16.3217424,14.8346938 Z M5.94162652,10.5068341 C5.94162652,8.10986566 7.87126344,6.11239195 10.2666748,6.11239195 C12.6620861,6.11239195 14.591723,8.0432832 14.591723,10.5068341 C14.591723,12.9038026 12.6620861,14.9012763 10.2666748,14.9012763 C7.87126344,14.9012763 5.94162652,12.970385 5.94162652,10.5068341 L5.94162652,10.5068341 Z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="search-b" fill="#fff">
<use xlink:href="#search-a"/>
</mask>
<use fill="#212121" xlink:href="#search-a"/>
<g fill="#424242" mask="url(#search-b)">
<rect width="24" height="24"/>
</g>
</g>
</svg>
</button>
<button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="empty-a" d="M12.96875,1.55555556 C12.734375,1.32222222 11.484375,0.388888889 11.25,0.233333333 C11.015625,-1.77635684e-15 10.625,-1.77635684e-15 10.390625,-1.77635684e-15 L2.96875,-1.77635684e-15 C2.734375,-1.77635684e-15 2.34375,0.0777777778 2.109375,0.233333333 C1.875,0.466666667 0.625,1.4 0.390625,1.55555556 C0.15625,1.78888889 0,2.02222222 0,2.48888889 C0.078125,2.87777778 1.484375,12.4444444 1.484375,12.4444444 C1.5625,12.6777778 1.875,12.9111111 2.109375,12.9111111 L11.171875,12.9111111 C11.40625,12.9111111 11.71875,12.6777778 11.796875,12.4444444 C11.796875,12.4444444 13.203125,2.87777778 13.28125,2.48888889 C13.359375,2.02222222 13.203125,1.71111111 12.96875,1.55555556 L12.96875,1.55555556 Z M10,4.9 C10,4.9 10,5.13333333 9.921875,5.52222222 L9.921875,5.52222222 L9.921875,5.67777778 C9.765625,6.53333333 9.296875,7.31111111 8.59375,7.77777778 C8.046875,8.16666667 7.421875,8.32222222 6.796875,8.32222222 C6.09375,8.32222222 5.46875,8.08888889 5,7.77777778 C4.296875,7.31111111 3.75,6.53333333 3.671875,5.67777778 L3.671875,5.52222222 L3.671875,5.52222222 C3.59375,5.21111111 3.59375,4.9 3.59375,4.9 C3.59375,4.9 3.59375,4.9 3.59375,4.82222222 C3.59375,4.82222222 3.59375,4.82222222 3.59375,4.74444444 C3.59375,4.66666667 3.671875,4.51111111 3.75,4.43333333 C3.828125,4.35555556 3.984375,4.27777778 4.0625,4.27777778 L4.0625,4.27777778 L4.140625,4.27777778 L4.140625,4.27777778 C4.296875,4.27777778 4.453125,4.35555556 4.53125,4.51111111 C4.609375,4.58888889 4.609375,4.66666667 4.609375,4.74444444 C4.609375,4.74444444 4.6875,4.97777778 4.6875,5.28888889 L4.6875,5.44444444 L4.6875,5.44444444 C4.765625,5.83333333 5,6.22222222 5.3125,6.53333333 C5.703125,6.84444444 6.171875,7.07777778 6.71875,7.07777778 C7.265625,7.07777778 7.734375,6.84444444 8.125,6.53333333 C8.4375,6.22222222 8.671875,5.91111111 8.75,5.44444444 L8.75,5.44444444 L8.75,5.28888889 C8.828125,4.97777778 8.828125,4.74444444 8.828125,4.74444444 C8.828125,4.66666667 8.828125,4.58888889 8.90625,4.51111111 C8.984375,4.35555556 9.140625,4.27777778 9.296875,4.27777778 L9.296875,4.27777778 L9.375,4.27777778 L9.375,4.27777778 C9.53125,4.27777778 9.609375,4.35555556 9.6875,4.43333333 C9.765625,4.51111111 9.84375,4.58888889 9.84375,4.74444444 C10,4.82222222 10,4.82222222 10,4.9 L10,4.9 L10,4.9 Z M11.40625,2.1 L11.40625,2.1 L10.703125,2.1 L9.609375,2.1 L7.5,2.1 L5.78125,2.1 L3.671875,2.1 L2.578125,2.1 L2.03125,2.1 L2.03125,2.1 C1.875,2.1 1.796875,2.02222222 1.796875,1.86666667 C1.796875,1.78888889 1.796875,1.71111111 1.875,1.71111111 L1.875,1.71111111 L2.734375,1.08888889 L2.734375,1.08888889 C2.734375,1.08888889 2.734375,1.08888889 2.8125,1.01111111 L2.8125,1.01111111 C2.890625,0.933333333 3.046875,0.855555556 3.203125,0.855555556 L3.203125,0.855555556 L10.078125,0.855555556 L10.078125,0.855555556 C10.234375,0.855555556 10.390625,0.933333333 10.46875,1.01111111 L10.46875,1.01111111 C10.46875,1.01111111 10.46875,1.01111111 10.546875,1.08888889 L10.546875,1.08888889 L11.40625,1.71111111 L11.484375,1.71111111 C11.5625,1.78888889 11.5625,1.78888889 11.5625,1.86666667 C11.640625,1.94444444 11.484375,2.1 11.40625,2.1 L11.40625,2.1 Z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(5 6)">
<mask id="empty-b" fill="#fff">
<use xlink:href="#empty-a"/>
</mask>
<use fill="#BDBDBD" xlink:href="#empty-a"/>
<g fill="#424242" mask="url(#empty-b)">
<rect width="24" height="24" transform="translate(-5 -6)"/>
</g>
</g>
</svg>
</button>
</div>
</nav>
CSS:
nav.nav-desktop {
display: none;
}
#media only screen and (min-width: 48em) {
nav.nav-mobile {
display: none;
}
nav.nav-desktop {
display: initial;
z-index: 999;
width: 100%;
height: 96px;
position: fixed;
top: 0;
left: 0;
}
nav.nav-desktop .nav-left {
display: inline-block;
position: absolute;
top: 28px;
left: 24px;
}
nav.nav-desktop .nav-left button {
margin-left: 24px;
}
nav.nav-desktop .nav-right {
display: inline-block;
position: absolute;
top: 28px;
right: 24px;
}
nav.nav-desktop .nav-right button {
margin-right: 24px;
}
nav.nav-desktop .logo-container {
position: absolute;
top: 50%;
left: 50%;
width: 438px;
height: 72px;
margin: -36px 0 0 -219px;
}
}
Note how once you get into the desktop breakpoint, 3 of the 4 icons become black boxes.
Fyi: The "search" magnifying glass icon is removed on mobile as per the designer's comps, so that is never inside a "display: none" parent -- and so that still shows up fine on desktop.
Am I doing something wrong here? I am not experienced with SVGs
Is this a Chrome bug?
It is because you have duplicate id attributes. For instance you have two <mask> elements labelled id="hamburger-b".
If you have duplicate id attributes, it is browser dependent which one gets used. You might wonder why that would matter if the definitions are identical. Unfortunately, it turns out you happen to be setting the one that Chrome is choosing to display: none.
The solution is to change the ids of one of the duplicates. For example, change hamburger-a to hamburger-a2, hamburger-b to hamburger-b2, etc.
I'm attempting to rotate SVG layers in different directions when a user hovers over the image. I can easily rotate the div container but of course this rotates the entire image. I've made a start on the code and hoping that one of you bright sparks familar with SVG animations can help me in the right direction. If possible I'd like to avoid SVG SMIL or JavaScript solutions.
Here is my HTML Code:
<div class="services-one">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 35 35" enable-background="new 0 0 35 35" xml:space="preserve">
<g id="sm_ring">
<path fill="#F1B91B" d="M17.495,15.592c-0.969,0-1.769,0.727-1.891,1.662H14.1c0.125-1.765,1.596-3.158,3.395-3.158c0.532,0,1.036,0.122,1.483,0.34l-0.75,1.303C18.003,15.645,17.755,15.592,17.495,15.592z"/>
<path fill="#626363" d="M17.495,19.407c0.26,0,0.508-0.052,0.733-0.147l0.75,1.305c-0.447,0.219-0.951,0.34-1.483,0.34c-1.798,0-3.269-1.394-3.395-3.157h1.504C15.726,18.682,16.526,19.407,17.495,19.407z"/>
<path fill="#626363" d="M19.402,17.506c-0.01-0.617-0.313-1.16-0.773-1.501l0.732-1.316c0.91,0.599,1.521,1.622,1.537,2.794c0.019,1.173-0.559,2.215-1.449,2.841l-0.773-1.293C19.126,18.675,19.413,18.123,19.402,17.506z"/>
</g>
<g id="md_ring">
<path fill="#F1B91B" d="M17.488,13.011c-2.279,0-4.163,1.709-4.447,3.912l-3.54,0.001c0.296-4.154,3.758-7.434,7.987-7.434c1.253,0,2.438,0.288,3.495,0.802l-1.77,3.065C18.684,13.135,18.102,13.011,17.488,13.011z"/>
<path fill="#626363" d="M17.488,21.989c0.612,0,1.194-0.124,1.727-0.347l1.77,3.064c-1.057,0.514-2.242,0.802-3.495,0.802c-4.229,0-7.691-3.278-7.987-7.433l3.54-0.001C13.325,20.279,15.209,21.989,17.488,21.989z"/>
<path fill="#626363" d="M21.979,17.501c0-1.452-0.695-2.741-1.769-3.561l1.772-3.071c2.121,1.441,3.517,3.873,3.517,6.632c0,2.758-1.396,5.188-3.517,6.63l-1.772-3.068C21.282,20.241,21.979,18.951,21.979,17.501z"/>
</g>
<g id="lg_ring">
<path fill="#F1B91B" d="M17.476,7.925c-4.862,0-8.88,3.646-9.488,8.345H0.437C1.068,7.409,8.453,0.413,17.476,0.413c2.674,0,5.204,0.615,7.458,1.71l-3.776,6.54C20.021,8.189,18.779,7.925,17.476,7.925z"/>
<path fill="#626363" d="M17.476,27.075c1.303,0,2.547-0.263,3.682-0.738l3.775,6.54c-2.254,1.096-4.783,1.71-7.458,1.71c-9.023,0-16.408-6.994-17.039-15.856h7.551C8.595,23.43,12.613,27.075,17.476,27.075z"/>
<path fill="#626363" d="M27.052,17.501c0-3.095-1.483-5.846-3.77-7.597l3.778-6.549c4.528,3.075,7.502,8.262,7.502,14.146c0,5.883-2.974,11.069-7.5,14.144l-3.78-6.547C25.568,23.346,27.052,20.596,27.052,17.501z"/>
</g>
</svg>
</div>
Here is my CSS Code:
.services-one #lg_ring, .services-one #sm_ring, .services-one #md_ring
{
-webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-o-transition-duration:0.8s;transition-duration:0.8s;
-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;
overflow:hidden;
}
.services-one:hover #lg_ring, .services-one:hover #sm_ring
{
-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);
}
.services-one:hover #md_ring
{
-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg);
}
Here is my JSFiddle: http://jsfiddle.net/bcdxmpyc/
The top example is the SVG one that I'm attempting to rotate, I want it too rotate just like example below it, but obviously the rings in different directions! What am I doing wrong?
You need to specify the transform-origin
.services-one {
width: 100px; height: 100px;
}
.services-one #lg_ring, .services-one #sm_ring, .services-one #md_ring {
-webkit-transition-duration:0.8s;
-moz-transition-duration:0.8s;
-o-transition-duration:0.8s;
transition-duration:0.8s;
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-o-transition-property:-o-transform;
transition-property:transform;
overflow:hidden;
transform-origin:center center; /* here */
}
.services-one:hover #lg_ring, .services-one:hover #sm_ring {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
.services-one:hover #md_ring {
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);
}
<div class="services-one">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35 35" enable-background="new 0 0 35 35" xml:space="preserve">
<g id="sm_ring">
<path fill="#F1B91B" d="M17.495,15.592c-0.969,0-1.769,0.727-1.891,1.662H14.1c0.125-1.765,1.596-3.158,3.395-3.158c0.532,0,1.036,0.122,1.483,0.34l-0.75,1.303C18.003,15.645,17.755,15.592,17.495,15.592z" />
<path fill="#626363" d="M17.495,19.407c0.26,0,0.508-0.052,0.733-0.147l0.75,1.305c-0.447,0.219-0.951,0.34-1.483,0.34c-1.798,0-3.269-1.394-3.395-3.157h1.504C15.726,18.682,16.526,19.407,17.495,19.407z" />
<path fill="#626363" d="M19.402,17.506c-0.01-0.617-0.313-1.16-0.773-1.501l0.732-1.316c0.91,0.599,1.521,1.622,1.537,2.794c0.019,1.173-0.559,2.215-1.449,2.841l-0.773-1.293C19.126,18.675,19.413,18.123,19.402,17.506z" />
</g>
<g id="md_ring">
<path fill="#F1B91B" d="M17.488,13.011c-2.279,0-4.163,1.709-4.447,3.912l-3.54,0.001c0.296-4.154,3.758-7.434,7.987-7.434c1.253,0,2.438,0.288,3.495,0.802l-1.77,3.065C18.684,13.135,18.102,13.011,17.488,13.011z" />
<path fill="#626363" d="M17.488,21.989c0.612,0,1.194-0.124,1.727-0.347l1.77,3.064c-1.057,0.514-2.242,0.802-3.495,0.802c-4.229,0-7.691-3.278-7.987-7.433l3.54-0.001C13.325,20.279,15.209,21.989,17.488,21.989z" />
<path fill="#626363" d="M21.979,17.501c0-1.452-0.695-2.741-1.769-3.561l1.772-3.071c2.121,1.441,3.517,3.873,3.517,6.632c0,2.758-1.396,5.188-3.517,6.63l-1.772-3.068C21.282,20.241,21.979,18.951,21.979,17.501z" />
</g>
<g id="lg_ring">
<path fill="#F1B91B" d="M17.476,7.925c-4.862,0-8.88,3.646-9.488,8.345H0.437C1.068,7.409,8.453,0.413,17.476,0.413c2.674,0,5.204,0.615,7.458,1.71l-3.776,6.54C20.021,8.189,18.779,7.925,17.476,7.925z" />
<path fill="#626363" d="M17.476,27.075c1.303,0,2.547-0.263,3.682-0.738l3.775,6.54c-2.254,1.096-4.783,1.71-7.458,1.71c-9.023,0-16.408-6.994-17.039-15.856h7.551C8.595,23.43,12.613,27.075,17.476,27.075z" />
<path fill="#626363" d="M27.052,17.501c0-3.095-1.483-5.846-3.77-7.597l3.778-6.549c4.528,3.075,7.502,8.262,7.502,14.146c0,5.883-2.974,11.069-7.5,14.144l-3.78-6.547C25.568,23.346,27.052,20.596,27.052,17.501z" />
</g>
</svg>
</div>
Transform-origin does not work very well in Firefox and does nothing in Internet Explorer. You can however get around this problem with using the JavaScript libraries svgjs or gsap.