Logic Machine Forum
Custom javascript function change color of svg icon - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Custom javascript function change color of svg icon (/showthread.php?tid=3781)

Custom javascript function change color of svg icon - tigi - 29.12.2021

Hi,

I would like to change the color of the svg icon in visualisation based on it's value.
On the internet I found that the css attribute 'fill' should do the job but it doesn't.
The script itself works, if I alter it to change the background of the 'icon' element, it changes color accordingly.
Code:
icon.css('background-color', color);

How can I make it changes the color of the svg?

Code:
$(function() {
  $('.bgcolor-by-value').each(function(i, el) {
    var $el = $(el), addr = $(el).data('object'), icon = $el.find('.icon');
    if (addr) {
      grp.listen(addr, function(obj) {
      console.log(icon.get(0), obj.value);
        var value = obj.value
          , color = 'green'; // default color

        if (value >= 3 && value <= 4) {
          color = 'orange';
        }
        else if (value >= 5) {
          color = 'red';
        }

        icon.css('background-color', color);
      });
    }
  });
});

Thanks!

RE: Custom javascript function change color of svg icon - admin - 29.12.2021

Have you considered using Additional icons for this? You can specify a value range and assign a specific icon to this range. It's also possible to change the whole icon hue which might work in certain cases: https://forum.logicmachine.net/showthread.php?tid=1717&pid=12060#pid12060

RE: Custom javascript function change color of svg icon - tigi - 29.12.2021

(29.12.2021, 13:55)admin Wrote: Have you considered using Additional icons for this? You can specify a value range and assign a specific icon to this range. It's also possible to change the whole icon hue which might work in certain cases: https://forum.logicmachine.net/showthread.php?tid=1717&pid=12060#pid12060

Thanks for the tip. Additional icons is indeed an option, I've opted for the 'filter' attribute though.

I made my svg grey 40%, this seems to work for changing to green, orange, red,..
Additionally the text color changes too with the code below.
Converting hex color to filter css color can be done here: https://codepen.io/sosuke/pen/Pjoqqp

Code:
$(function() {
  $('.iconcolor-by-value').each(function(i, el) {
    var $el = $(el), addr = $(el).data('object'), icon = $el.find('.icon');
    if (addr) {
      grp.listen(addr, function(obj) {
      console.log(icon.get(0), obj.value);
        var value = obj.value
          , color = 'green'; // default color
            filter = 'invert(55%) sepia(95%) saturate(2530%) hue-rotate(82deg) brightness(108%) contrast(129%)';

        if (value >= 3 && value <= 4) {
          color = 'orange';
          filter = 'invert(68%) sepia(55%) saturate(5908%) hue-rotate(359deg) brightness(98%) contrast(100%)';
        }
        else if (value >= 5) {
          color = 'red';
          filter = 'invert(16%) sepia(100%) saturate(7486%) hue-rotate(15deg) brightness(104%) contrast(121%)';
        }

       // icon.css('background-color', color);
        $(el).css('color', color);
        icon.css('filter', filter);
      });
    }
  });
});