Gantt Chart: Inconsistency with the icon selection

[ravi6565]

What part of Carbon does this bug correlate to?
Gantt Chart Onclick event for Icons inside Graph
General graph logic:
We are passing custom SVG icons for Gantt chart and SVG icons are transparent. So on click of Icons only filled portions we are seeing click event and empty spaces are not clickable.
Reference JIRA: https://jira3.cerner.com/browse/UXREQ-13696

• Graph attributes (axes, legends, regions...etc.)
• Other (please specify): actionLegend.

Specific graph logic:

• Bar graph
• Bubble graph
• Gantt chart
• Line graph
• Paired result
• Pie chart
• Scatter plot
• Timeline

Describe the bug
A clear and concise description of what the bug is.
We noticed that SVG Icons without background onClick event isn't working as expected(Clickable).

In the below screenshot SVG icon is transparent. Filled places are clickable(Black color) and empty spaces i.e. inside oval empty spaces are non-clickable. 

Because of the above issue, we are seeing inconsistency in the icon selection(Click event).

For reference: https://pages.github.cerner.com/aeon-womenshealth/partogram-js/components/partogram-js/partogram 
please validate the same in the above URL. Steps to reproduce(Move the mouse cursor over the SVG icon in Gantt graph i.e. action legends) and Inconsistency behavior(try to move the cursor to Black color SVG fill or empty spaces i.e. transparent inside oval shape)

Reference JIRA LINK: https://jira3.cerner.com/browse/UXREQ-13696

Link to CodeSandbox
Cerner Github link:
Custom SVG Icons object creation for action legends: https://github.cerner.com/aeon-womenshealth/partogram-js/blob/master/src/components/labor-curve/laborCurveCarbonHelpers.js#L273-L290
SVG Icons: https://github.cerner.com/aeon-womenshealth/partogram-js/blob/master/src/components/labor-curve/FetalPositionSvgObject.js

Expected behavior
A clear and concise description of what you expected to happen.
Entire SVG icons should be selected including empty spaces inside SVG icons.

Screenshots
If applicable, add screenshots to help explain your problem.
Updated above

Desktop (please complete the following information):

• OS: [e.g. iOS] - MAC and Windows
• Browser [e.g. chrome, safari] - Cross browsers

Additional context
Add any other context about the problem here.
If any additional information please feel to provide a comments.

[sdadn]

This limitation is caused by click events being bound to the SVG element, which results in a pixel-perfect area that ignores transparency in a custom icon. After discussing with UX, we came to the conclusion that clicking SVG's can be improved by drawing a transparent circle and binding the click event to it. The SVG icon will then be drawn on top the circle for visuals. This change will only be done for gantt charts and will lay the groundwork for hover events in the future.