Clickable icons


We have some SVG icons in our nodes, but it seems that they’re only clickable when the mouse is over the “lines” of the SVG, meaning that some parts of the icon are not clickable at all… this makes the experience of clicking an icon not very ideal.

Is there anything we can do to avoid this behaviour? Should we wrap it somehow with other component that will have the click event attached to it?

Thanks in advance.

Are you using a Shape to show that icon? If so, set the Shape.background to “transparent”.

Hi Walter,

Yes, I am using go.Shape. I have tried adding the background, but makes no difference. Since I am no SVG expert, I’m wondering if the icon itself is causing any issue, but happens with any icon from icomoon.

For instance, the “copy” icon, I need to click the edges of the sheet to trigger the click event…
Screenshot 2022-03-03 at 13.23.27

I am guessing that the geometry specified might be the issue.

geometry: go.Geometry.parse(icon, true)

If I remove it, I see the shape as a square, fully clickable, with no icon obviously.

How is your Shape defined?

Sorry for the late reply, we had to renew our license to get support from you. We are defining the shape like this:

$(go.Shape, { background: ‘transparent’, margin: 5, fill: ‘black’, width: 14, height: 14, strokeWidth: 0, geometry: go.Geometry.parse(icon, true), cursor: ‘pointer’ })

But what is the value of icon?

I missed that, it’s the actual icon from iconmoon, like:

'M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z'

Hmmm, I assume you mean that mouse events occur in all of the filled areas of the Shape, not just the stroked lines, yes? That is the correct behavior. However, setting the background to a non-null value doesn’t seem to make the whole rectangular area responsive to mouse events. We’ll investigate.

In the meantime you can use a “transparent” background on something behind the Shape.

This will be fixed in v2.2.12, which has just been released.

Thank you Walter, your solutions works. Looking forward to the next version.