Communicate
Mitglied
Hallo zusammen,
ich nutze für meine Hausautomation ein Stück Software, dass open source ist (iobroker).
Hierin ist auch eine Funktion enthalten, um bestimmte svgs abhängig von einem Zustand (z.B. Tür offen) einzufärben.
Leider ist die dazugehörige jquery-Funktion nicht richtig implementiert, so dass das einfärben nicht richtig klappt.
Mein Ziel ist es, die stroke attribute des SVG (das per img eingebunden ist) durch einen bestimmten Wert (der kommt dann Variabel aus der Anwendung)
zu ersetzen.
Der Code sieht so aus (inkl. meiner Anpassung):
setSvgColor: function (el, color) {
setTimeout(function () {
el.parent().find('svg').remove();
var $that = el;
var imgURL = $that.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
$svg = $svg.attr('width', '100%');
$svg = $svg.attr('height', '100%');
$svg = $svg.attr('stroke', '#ff3c41');
$svg.find('*').each(function () {
var style = $(this).attr('style');
if (style) {
style = style.replace(/#FFFFFF/g, color);
$(this).attr('style', style);
}
});
// Replace image with new SVG
$that.replaceWith($svg);
}, 'xml');
}, 0);
}
Kann mir jemand helfen und erklären, warum die stroke-Änderung nicht funktioniert? Ich bin leider noch ziemlicher jquery Anfänger...
Grüße
Dominic
ich nutze für meine Hausautomation ein Stück Software, dass open source ist (iobroker).
Hierin ist auch eine Funktion enthalten, um bestimmte svgs abhängig von einem Zustand (z.B. Tür offen) einzufärben.
Leider ist die dazugehörige jquery-Funktion nicht richtig implementiert, so dass das einfärben nicht richtig klappt.
Mein Ziel ist es, die stroke attribute des SVG (das per img eingebunden ist) durch einen bestimmten Wert (der kommt dann Variabel aus der Anwendung)
zu ersetzen.
Der Code sieht so aus (inkl. meiner Anpassung):
setSvgColor: function (el, color) {
setTimeout(function () {
el.parent().find('svg').remove();
var $that = el;
var imgURL = $that.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
$svg = $svg.attr('width', '100%');
$svg = $svg.attr('height', '100%');
$svg = $svg.attr('stroke', '#ff3c41');
$svg.find('*').each(function () {
var style = $(this).attr('style');
if (style) {
style = style.replace(/#FFFFFF/g, color);
$(this).attr('style', style);
}
});
// Replace image with new SVG
$that.replaceWith($svg);
}, 'xml');
}, 0);
}
Kann mir jemand helfen und erklären, warum die stroke-Änderung nicht funktioniert? Ich bin leider noch ziemlicher jquery Anfänger...
Grüße
Dominic