Hey there,

for my smart home i use a piece of open source software (iobroker).

There is a function to colorize svgs depending on the state (e.g. an open door).

For sadness, the jquery function is obviously not correct implemented - the coloring does not work. 

my goal is, that the stroke attribs of the svg (embedded through img-tag) could be replaced by an given color.

Code, that is not working:

1. setSvgColor: function (el, color) {
2.                     setTimeout(function () {
3.                         el.parent().find('svg').remove();
4.                         var $that = el;
5.                         var imgURL = $that.attr('src');
6.                         $.get(imgURL, function(data) {
7.                             // Get the SVG tag, ignore the rest
8.                             var $svg = jQuery(data).find('svg');
9.                             // Remove any invalid XML tags as per http://validator.w3.org
10.                             $svg = $svg.removeAttr('xmlns:a');
11.                             $svg = $svg.attr('width',  '100%');
12.                             $svg = $svg.attr('height', '100%');
13.                             
14.                             $svg = $svg.attr('stroke', '#ff3c41');
15.                            
16.                             $svg.find('*').each(function () {
17.                                 var style = $(this).attr('style');
18.                                 if (style) {
19.                                     style = style.replace(/#FFFFFF/g, color);
20.                                     $(this).attr('style', style);
21.                                 }
22.                             });
23.                             // Replace image with new SVG
24.                             $that.replaceWith($svg);
25.                         }, 'xml');
26.                     }, 0);
27.                 }

anyone who could see what I am doing wrong?

Cheers,  Dominic