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>```
Related
I got an SVG from a designer of which I'd like to set the color through CSS from outside of the SVG. I managed to overwrite part of the colors, but not all. What would I need to do to have the icon unfilled, with red lines over the grey background? Ideally without modifying the SVG because there are plenty of them with similar structure.
html {
background-color: #eeeeee;
}
.icon{
height: 6rem;
width: 6rem;
}
svg {
fill:red;
}
<html>
<div class="icon">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 76.5 76.5" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#000000;stroke-width:2;}
.st2{fill:#FFFFFF;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:5;}
.st4{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st5{display:inline;}
.st6{font-family:'Akkurat-Bold';}
.st7{font-size:7.0024px;}
.st8{display:inline;fill:#2B3427;}
.st9{fill:none;stroke:#2B3427;stroke-width:2;}
.st10{fill:none;stroke:#2B3427;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st11{display:inline;fill:#FFFFFF;}
.st12{fill:#2B3427;}
</style>
<g id="Vorlagen" class="st0">
</g>
<g id="Kreis_Black">
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
</g>
<g id="Illu">
<g>
<path class="st1" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st1" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st4" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st2" width="32.6" height="8.1"/>
</g>
<g id="Typo" class="st0">
<text transform="matrix(1 0 0 1 25.4238 53.8332)" class="st5 st6 st7">VEGAN</text>
</g>
<g id="Typo_Gepfadet">
<g>
<path d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
<g id="Ikons_x5F_Grün" class="st0">
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<g class="st5">
<path class="st9" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st9" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st10" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st11" width="32.6" height="8.1"/>
<g class="st5">
<path class="st12" d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path class="st12" d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path class="st12" d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path class="st12" d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path class="st12" d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
</svg>
</div>
</html>
why not simply remove the style part inside the SVG ?
(and create your own css [in the html HEAD] with the colors you want)
other just use css !impotant in your css
html { background-color: #eeeeee; }
.icon{
height: 6rem;
width: 6rem;
}
svg { fill:red; }
/* add: */
.st1 { stroke:blue !important; }
path { stroke:orange !important; }
SVG is a regular HTML element. Therefore it takes background-color: white or transparent instead of fill to stylize its background.
I have two icons in svg.
Updated:
one
two
First of all, is it possible to make this icons using same markup?
For example:
<g>
<circle ... />
<path ... />
</g>?
Because i can operate only with classes. That mean that i want to change their styles in css and that why i want same markup for both icons.
Also i want remove cx="9" cy="9" from both icons, because this icon is part of the <rect /> and should be placed strictly on the verge of this <rect />. And this cx and cy move it sideways. If i just remove them, then icon become broken a bit. I need to change attributes of path and polyline also. How i can do it? Thank you
As for your re-use of SVG that part already has an answer here:
Inline SVG in CSS
You can do a lot with this using just CSS for example:
.firstxxx,
.secondxxx {
position: relative;
display: block;
top: -1.1em;
left: 6em;
}
.secondxxx circle{fill:blue;}
.containerthing {
height: 4em;
}
<div class="containerthing">1. One
<svg class="firstxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>
</div>
<div class="containerthing">2. Two
<svg class="secondxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>
</div>
I don't know why, but if you want to remove cx="9" cy="9", you can use transform: translate()
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" r="9" transform="translate(9, 9)"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>
You can position the shape where you want and reference the SVG through xlink:href in the shape's attributes definition along with a specific markup through the JointJS Devs plugin. E.g.:
joint.shapes.devs.Model.define('app.MyWindow', {
markup: `<image/><text/>`,
position: {
x: 100,
y: 100
},
size: {
width: 10,
height: 10
},
attrs: {
image: {
width: 8,
height: 8,
'xlink:href': 'assets/my_svg.svg'
},
}
});
For some days I've been trying to solve this, i just want to make a color change at hover on a SVG (with only CSS), I've found lots of tutorials (in and out of Stack) but none of them is working for me.
Can anyone tell me what can I do?
This is the SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path id="svgbutton" d="M-328,271.1c-127,0-229.9,102.9-229.9,229.9S-455,730.9-328,730.9S-98.1,628-98.1,501S-201,271.1-328,271.1z M-139.2,580.8
c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1
c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0
l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6
C-123.1,528.7-128.5,555.5-139.2,580.8z"/>
<g>
<path class="st0" d="M192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175
c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175
C320.3,722.8,258.1,748.5,192,748.5z M192,278.5C69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5
c122.7,0,222.5-99.8,222.5-222.5C414.5,378.3,314.7,278.5,192,278.5z"/>
</g>
<g>
<path class="st0" d="M192,604.5L67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3
c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3L192,604.5z"/>
</g>
</svg>
I tried to associate the svg with an id="svgbutton", but I don't know if i should put it into "img src" in HTML or on the SVG code itself.
Anyway, i tried these two and it didn't work as #svgbutton {fill:red}
Can any pacient person explain this for me?
Thank you!
(and sorry for the bad english)
Using .st0:hover will allow you to change the fill when the white sections are hovered over directly:
body {
background: black;
}
.st0 {
fill: #FFFFFF;
}
.st0:hover {
fill: red;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">
<path id="svgbutton" d="M-328,271.1c-127,0-229.9,102.9-229.9,229.9S-455,730.9-328,730.9S-98.1,628-98.1,501S-201,271.1-328,271.1z M-139.2,580.8
c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1
c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0
l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6
C-123.1,528.7-128.5,555.5-139.2,580.8z"/>
<g>
<path class="st0" d="M192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175
c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175
C320.3,722.8,258.1,748.5,192,748.5z M192,278.5C69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5
c122.7,0,222.5-99.8,222.5-222.5C414.5,378.3,314.7,278.5,192,278.5z"/>
</g>
<g>
<path class="st0" d="M192,604.5L67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3
c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3L192,604.5z"/>
</g>
</svg>
However, you probably want it to change colour when the inner black section is hovered over as well. In this case, you're looking for svg:hover .st0:
body {
background: black;
}
.st0 {
fill: #FFFFFF;
}
svg:hover .st0 {
fill: red;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-58 251 500 500" style="enable-background:new -58 251 500 500;" xml:space="preserve">
<path id="svgbutton" d="M-328,271.1c-127,0-229.9,102.9-229.9,229.9S-455,730.9-328,730.9S-98.1,628-98.1,501S-201,271.1-328,271.1z M-139.2,580.8
c-10.3,24.4-25.1,46.3-43.9,65.1c-18.8,18.8-40.7,33.6-65.1,43.9c-25.3,10.7-52.1,16.1-79.8,16.1s-54.5-5.4-79.8-16.1
c-24.4-10.3-46.3-25.1-65.1-43.9c-18.8-18.8-33.6-40.7-43.9-65.1c-10.7-25.3-16.1-52.1-16.1-79.8c0-26.5,5-52.3,14.8-76.6l0,0l0,0
l181.3,181.3c2.3,2.4,5.5,3.7,8.8,3.7s6.4-1.4,8.8-3.7l181.3-181.2l0.2-0.2c0,0,0,0,0,0.1c9.8,24.3,14.8,50.1,14.8,76.6
C-123.1,528.7-128.5,555.5-139.2,580.8z"/>
<g>
<path class="st0" d="M192,748.5c-66.1,0-128.3-25.7-175-72.5c-46.7-46.7-72.5-108.9-72.5-175c0-66.1,25.7-128.3,72.5-175
c46.7-46.7,108.9-72.5,175-72.5c66.1,0,128.3,25.7,175,72.5c46.7,46.7,72.5,108.9,72.5,175c0,66.1-25.7,128.3-72.5,175
C320.3,722.8,258.1,748.5,192,748.5z M192,278.5C69.3,278.5-30.5,378.3-30.5,501c0,122.7,99.8,222.5,222.5,222.5
c122.7,0,222.5-99.8,222.5-222.5C414.5,378.3,314.7,278.5,192,278.5z"/>
</g>
<g>
<path class="st0" d="M192,604.5L67.5,479.9c-7.8-7.8-7.8-20.5,0-28.3c7.8-7.8,20.5-7.8,28.3,0l96.3,96.3l96.3-96.3
c7.8-7.8,20.5-7.8,28.3,0c7.8,7.8,7.8,20.5,0,28.3L192,604.5z"/>
</g>
</svg>
Hope this helps! :)
Is that possible to add text on hover with svg polygon shape?
My code like this
<svg>
<polygon class="st0" points="0,1.833 638,1.833 383,348.833 0,348.833 "/>
<polygon class="st0" points="0,355.333 649,355.333 891.5,664.833 0,664.833 "/>
<polygon class="st0" points="392.5,348.833 514.75,181.333 645.25,348.833 "/>
<polyline class="st0" points="518.875,174.908 644.667,2.021 1139.833,1.52 1139.75,663.583 897.25,663.583 "/>
</svg>
when I checked many reference there is only examples for a single polygon, But on my code I need 4 shape with different text in a SVG tag. Is that possible to add text on hover with multiple polygons?
Here a fiddle what I have
When I hover I want like this
Any advice would be appreciated
Yo can add
<title>Your text</title>
tag inside <svg></svg> or <poligon></poligon> tag that shows default tooltip with text on it.
Updated jsfiddle
Source:
https://developer.mozilla.org/en/docs/Web/SVG/Element/title
Tooltips not showing when hovering over SVG polygons
.st0 {
fill: #0491B7;
}
.st1 {
fill: #0491B7;
}
.st1:hover {
fill: red;
opacity: 0.5;
}
.st0:hover {
fill: red;
}
text{
display:none;
fill:#fff;
font-size:2em;
font-family:sans-serif;
}
text.sub-text{
display:none;
fill:#fff;
font-size:0.8em;
font-family:sans-serif;
}
g:hover > text{
display:block;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1139.833px" height="663.313px" viewBox="0 0 1139.833 663.313" style="enable-background:new 0 0 1139.833 663.313;" xml:space="preserve">
<g>
<polygon class="st0" points="0,0.313 638,0.313 383,347.313 0,347.313 ">
<title>One</title>
</polygon>
<text x="10" y="40"> TITLE </text>
<text x="10" y="55" class="sub-text">Some Content</text>
</g>
<polygon class="st1" points="0,353.813 649,353.813 891.5,663.313 0,663.313 ">
<title>Two</title>
</polygon>
<polygon class="st0" points="392.5,347.313 514.75,179.813 645.25,347.313 ">
<title>Three</title>
</polygon>
<polyline class="st0" points="518.875,173.388 644.667,0.501 1139.833,0 1139.75,662.063 897.25,662.063">
<title>Four</title>
</polyline>
</svg>
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.