Style blink

[pensur]

Is there a way to blink an object? furthermore, is there a way to blink an object by changing its style? I can change the element style by doing: elem._element.css('filter', 'url(#filterColorizeGreen)') for example, but I am not able to animate this. I would like to colorize between red and yellow to show an alarm.

[MarcusCalidus]

the easiest way might be to include an animate object into your svg: https://developer.mozilla.org/de/docs/Web/SVG/Element/animate

working demo: http://jsfiddle.net/pLh05ypL/1/

[pensur]

Hello, Thank you for your answer.

I meant blinking this way:

• Only if some condition is met, not permanently
• Blink abruptly, I think an instant color change cannot be made this way
• Blink by changing the style because the item has a lot of components and they have shadows and darker parts.

I found the way by adding a "timer" function using setTimeout in the JS Init. I paste the code here in case it is of interest.

`//Check existence of previous running blink routine if(typeof options.timer_blink !== 'undefined') clearTimeout(options.timer_blink);

//State of blinking (style one or style two) options.state = false; options.blink = (svgnode, svgmap, data) => { clearTimeout(options.timer_blink); // Item in alarm if(svgmap.bomba.alarm === true){ if(options.state === true){ svgnode.node.ownerDocument.getElementById("floodColor").setAttribute("flood-color", svgnode.node.ownerDocument.color_alarm); svgmap.bomba.css('filter', 'url(#filterColorize)'); } else{ svgnode.node.ownerDocument.getElementById("floodColor").setAttribute("flood-color", svgnode.node.ownerDocument.color_alarm_blink); svgmap.bomba.css('filter', 'url(#filterColorize)'); } options.state = !options.state; } //If there is no alarm, no filter is applied else svgmap.bomba.css('filter', null); //Setup next call options.timer_blink = setTimeout(function() { options.blink(svgnode, svgmap, data); }, 800); // callback }`

[acedrew]

I took a look at this as well, and I think you've found the most direct way to accomplish what you want. If you think this could be reusable, you could take a look at https://github.com/ACE-IoT-Solutions/ace-svg-react/blob/3edd7535c231e02337ed07528b783e9a4a919587/src/ACESVGjsPanel.tsx#L27 and implement it as an extension there.

Thanks, glad you're finding value in the plugin!