I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change.
I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected.
No console errors are being reported. Currently, I am trying to transition the color from white to red on hover.
/** Replace all SVG images with inline SVG **/
jQuery('img.svg').each(function() {
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if (typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if (typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass + ' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Check if the viewport is set, if not, the SVG won't scale.
if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
}
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});#svg-hover:hover path {
fill: red;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- this is the first script loaded on my page. -->
</head>
<ul class="navbar_wrapper-ul navbar-nav mr-auto">
<li class="active nav-item">
<a class="nav-link active" href="#">
<img class="svg" id="svg-hover" src="images/house-outline.svg" style="height:25px;" />
Home
</a>
</li>
</ul>EDIT:
house-icon.svg:
body {
background-color: #000;
}<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 611.997 611.998" style="enable-background:new 0 0 611.997 611.998;" xml:space="preserve">
<g>
<g>
<path d="M511.114,300.251c-9.94,0-17.638,7.663-17.638,17.651v241.105H368.401v-98.453c0-9.236-7.697-17.31-17.002-17.31h-90.435 c-9.948,0-17.96,8.073-17.96,17.31v98.453h-124.76v-233.1c0-9.306-7.69-17.036-17.638-17.036c-9.298,0-16.995,7.73-16.995,17.036 v250.752c0,9.305,7.697,17.036,16.995,17.036h160.358c9.298,0,16.995-7.731,16.995-17.036v-98.454h55.801v98.454 c0,9.305,7.697,17.036,17.639,17.036h159.715c9.299,0,16.995-7.731,16.995-17.036V317.903 C528.109,307.915,520.413,300.251,511.114,300.251z" fill="#FFFFFF"/>
<path d="M607.003,314.003L467.819,174.225V78.919c0-9.921-8.019-17.583-17.96-17.583c-9.305,0-17.001,7.663-17.001,17.583v60.345 L318.046,23.774c-3.518-3.558-7.697-5.474-11.864-5.474c-4.81,0-8.983,1.984-12.507,5.474L5.361,312.087 c-6.917,6.91-7.375,17.994,0,24.357c6.411,7.389,17.454,6.91,24.371,0l276.45-275.793l275.807,278.393 c2.873,2.874,7.054,4.516,12.507,4.516c-4.81,0,8.976-1.642,12.507-4.516C613.42,332.613,613.899,320.982,607.003,314.003z" fill="#FFFFFF"/>
</g>
</g>
</svg>
</body>- The
fillproperty in the SVG determines its base color. My goal is to keep the SVG white by default and change to red on hover. - I prefer not to directly paste SVG code into the markup for cleanliness reasons. Therefore, I am attempting to achieve the fill effect on hover using the
imgtag.