Change color of graphical symbols (svg's)

[tobias-carlbom]

Hi,

I just wanted to share how to change color of a graphical symbol, like a circle. Perhaps this isnt news to you guys but i want to share it for future preferences :)

1. Add a Circle to your View and name it shape_3

2. Add this client side script function:

var group = document.querySelector('[data-name="shape_3"]');
if (group) {
  var circle = group.querySelector('ellipse');
  if (circle) {
    circle.style.transition = 'fill 0.3s'; // Optional: smooth transition

    circle.addEventListener('click', function() {
      var currentFill = circle.style.fill || circle.getAttribute('fill') || '';

      if (currentFill === 'red') {
        circle.style.fill = 'green';
      } else {
        circle.style.fill = 'red';
      }
    });
  }
}

3. Call the script function above from your View' on load event.

And yes, its possible to apply this to all shapes in the current View. Eg using document.querySelectorAll('[data-name^="shape_"]');

[jingshui127]

多谢分享。很有帮助的思路