Svg Icon increase click area

Is it possible to increase the click area of an icon in the svg node?

The problem now is that for example in the film icon the click event only occurs when clicking on the black lines of the icon, clicking on the grey parts (inside) of the film icon will not trigger a click event.
This not not handy on a touch screen , you miss always the right spot to click.
Tried it by overlaying an transparent square, but the square will only generate a click event when it's not transparent and a not transparent square will mess up my design.

node-red-contrib-ui-svg 2.2.4, NR 2.1.1

Capture.PNG

Hi @edje11,

Since this might be useful for other users also, I have quickly written a tutorial in this wiki page.

Bart

2 Likes

BTW other mechanism are based on increasing the padding of the element (see e.g. here, or by appling a thick transparent border. I have tried that but it didn't work in my test. Would have been nice, because then you would only have to apply a simple CSS style to your clickable shapes, instead of having to add invisible circles all over the place...

Hi Bart,
The tutorial as described on your wiki works great.
Thanks for the explanation.

1 Like

@BartButenaers , just tried looking at the tutorial and it doesn't let me view it, it just goes back to the same page as per your link!

I have fixed the link above. Had renamed the title of the wiki page ...

It seems that padding of SVG elements is not supported. So the invisible circle will be the way to go, if I am not mistaken ...

1 Like