What sort of custome behavior are we talking about?
I was successful with both of these options...
This one changed the state to be a different color.
This one caused the SVG to fade out.
To answer your first question, I am attempting to get around a boundingbox issue. I have multiple irregularly shaped SVGs in the same area that I use as buttons. However, their bounding boxes regularly overlap. I intended to apply CSS code like this in order to ignore the bounding boxes of the SVGs: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Though the answer by TLCMediaDesign below helped me access the SVG very directly, sadly I have still not found a workaround for this overlapping bounding box issue.
Your code also works to access aspects of the SVG object, and I think they should come in use too. Thank you!
Try wrapping your code in a setTimeout or setInterval to wait for the svg to be rendered. It should be there in 100ms or so.
This worked perfectly! I currently have a piece of code like this and it functions exactly as I hoped: