<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG Change Color Examples</title>
<style>
body {
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
font-weight: 300;
font-size: 1em;
margin-top: 100px;
margin-bottom: 50px;
}
#randomIcon, #randomIcon_inline {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
#randomIcon_inline:hover * {
stroke: #639DC1;
}
</style>
</head>
<body onload="snapFunction()">
So there are two ways to go about this depending on where we want to save the svg data. If it is stored in a .svg file and embedded we have to use a js library called snap.svg. If we can use inline svg data in the html itself, then we are able to use pure CSS. <br> See examples of each below:
<h1>external svg embedded with <object> tag: <br>
jQuery and snap.svg for effect</h1>
<object id="randomIcon" type="image/svg+xml" width="100" height="100" data="random.svg" class="svg">
</object>
<h1>inline svg code: <br> only css for effect</h1>
<svg id="randomIcon_inline" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 81">
<title>Untitled-2</title>
<path d="M91,9V88H12V9H91m1-1H11V89H92V8Z" transform="translate(-11 -8)"/>
<path d="M20.5,49.5l12.62-.74A2.31,2.31,0,0,0,34.8,45L32.68,42.3a2.31,2.31,0,0,1,1.26-3.66l8.35-2.09a2.31,2.31,0,0,0,1-4L40.41,30a2.31,2.31,0,0,1,1.33-4l9.68-.92a2.31,2.31,0,0,0,1.14-4.17L46.5,16.5" transform="translate(-11 -8)" fill="none" stroke="#000" stroke-miterlimit="10"/>
<polygon points="64.44 37.37 54.15 39.45 47.21 31.58 50.56 21.63 60.85 19.55 67.79 27.42 64.44 37.37" fill="none" stroke="#000" stroke-miterlimit="10"/>
<circle cx="22.5" cy="61.5" r="7" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5"/>
<polygon points="56.42 61.25 59.68 57.98 58.83 53.43 62.95 55.52 67 53.31 66.29 57.88 69.65 61.05 65.09 61.78 63.1 65.96 61 61.84 56.42 61.25" fill="none" stroke="#000" stroke-miterlimit="10"/>
<line x1="37.5" y1="43.5" x2="44.5" y2="48.5" fill="none" stroke="#000" stroke-miterlimit="10"/>
<line x1="43.5" y1="74.5" x2="47.5" y2="68.5" fill="none" stroke="#000" stroke-miterlimit="10"/>
<line x1="14.5" y1="7.5" x2="12.5" y2="14.5" fill="none" stroke="#000" stroke-miterlimit="10"/>
<line x1="66.5" y1="5.5" x2="72.5" y2="10.5" fill="none" stroke="#000" stroke-miterlimit="10"/>
</svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script>
function snapFunction() {
icon1 = Snap("#randomIcon");
icon1_elems = icon1.selectAll('line, polyline, path, circle, ellipse, rect, polygon');
console.log(icon1_elems);
$('#randomIcon').mouseenter(function(){
icon1_elems.forEach(function(elem){
console.log(elem);
elem.attr({
stroke: "#639DC1",
});
});
});
$('#randomIcon').mouseleave(function(){
icon1_elems.forEach(function(elem){
console.log(elem);
elem.attr({
stroke: "black",
});
});
});
}
</script>
</body>
</html>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81 81">
<title>random</title>
<path d="M91,9V88H12V9H91m1-1H11V89H92V8Z" transform="translate(-11 -8)"/>
<path d="M20.5,49.5l12.62-.74A2.31,2.31,0,0,0,34.8,45L32.68,42.3a2.31,2.31,0,0,1,1.26-3.66l8.35-2.09a2.31,2.31,0,0,0,1-4L40.41,30a2.31,2.31,0,0,1,1.33-4l9.68-.92a2.31,2.31,0,0,0,1.14-4.17L46.5,16.5" transform="translate(-11 -8)" fill="none" stroke="#000" stroke-miterlimit="10"/>
<polygon points="64.44 37.37 54.15 39.45 47.21 31.58 50.56 21.63 60.85 19.55 67.79 27.42 64.44 37.37" fill="none" stroke="#000" stroke-miterlimit="10"/>
<circle cx="22.5" cy="61.5" r="7" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="5"/>
<polygon points="56.42 61.25 59.68 57.98 58.83 53.43 62.95 55.52 67 53.31 66.29 57.88 69.65 61.05 65.09 61.78 63.1 65.96 61 61.84 56.42 61.25" fill="none" stroke="#000" stroke-miterlimit="10"/>
<line x1="37.5" y1="43.5" x2="44.5" y2="48.5" fill="none" stroke="#000" stroke-miterlimit="10"/>
<line x1="43.5" y1="74.5" x2="47.5" y2="68.5" fill="none" stroke="#000" stroke-miterlimit="10"/>
<line x1="14.5" y1="7.5" x2="12.5" y2="14.5" fill="none" stroke="#000" stroke-miterlimit="10"/>
<line x1="66.5" y1="5.5" x2="72.5" y2="10.5" fill="none" stroke="#000" stroke-miterlimit="10"/>
</svg>