Changing fill color in svg in an input type image

Question

I'm following this example: img src SVG changing the fill color

To change an input label like this:

<input name="ctl00$ctl00$cphM$cph$ImageButtonAnadirLote" class="btnAfirmativo" id="ctl00_ctl00_cphM_cph_ImageButtonAnadirLote" style="border-width: 0px; cursor: pointer;" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cphM$cph$ImageButtonAnadirLote", "", true, "", "", false, false))' type="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg">

Where the CSS is:

btnAfirmativo{width: 350px; height: 350px;}
btnAfirmativo path {fill: #000 !important;}

To change the color of a svg refereed by a input type image. I tried to adapt the code here: http://jsfiddle.net/kurnosem/fucdt3fp/2/

There is another question: Styling SVG Fill Color of an input element But this one does not offer the solution that I want.

Is it possible to change the color of an input tag type image if the image is a svg file? (adapting the jsfiddle code)

Answer 1

Since you already open the SVG and manipulate its content, you can do so with its fill color as well.

var $path = jQuery(data).find('path');
$path.attr('style', $path.attr('style').replace("#e81123","#000"));

Updated fiddle

Stack snippet

 $(function(){ //jQuery('img.btnAfirmativo').each(function(){ jQuery('input.btnAfirmativo').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) { var $path = jQuery(data).find('path'); $path.attr('style', $path.attr('style').replace("#e81123","#000")); // 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, else we gonna set it if we can. 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'); }); }); 

 btnAfirmativo{width: 350px; height: 350px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="btnAfirmativo" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg" alt="Microsoft" width="350" height="350"> <input name="ctl00$ctl00$cphM$cph$ImageButtonAnadirLote" class="btnAfirmativo" id="ctl00_ctl00_cphM_cph_ImageButtonAnadirLote" style="border-width: 0px; cursor: pointer;" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cphM$cph$ImageButtonAnadirLote", "", true, "", "", false, false))' type="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg"> 

---

With CSS, update it to this

.btnAfirmativo{width: 350px; height: 350px;}
.btnAfirmativo + svg path {fill: #0f0 !important;}

Stack snippet

 $(function(){ //jQuery('img.btnAfirmativo').each(function(){ jQuery('input.btnAfirmativo').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, else we gonna set it if we can. 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'); }); }); 

 .btnAfirmativo{width: 350px; height: 350px;} .btnAfirmativo + svg path {fill: #0f0 !important;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="btnAfirmativo" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg" alt="Microsoft" width="350" height="350"> <input name="ctl00$ctl00$cphM$cph$ImageButtonAnadirLote" class="btnAfirmativo" id="ctl00_ctl00_cphM_cph_ImageButtonAnadirLote" style="border-width: 0px; cursor: pointer;" onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$cphM$cph$ImageButtonAnadirLote", "", true, "", "", false, false))' type="image" src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Windows_logo_-_2012_%28red%29.svg">