In my website i use svg elements. Sometimes i need them to be clickable, therefore i want pointer cursor over them.
However adding css class or style
cursor: pointer;
not work.
That's the example element
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object>
It seems like it just not worki with svg. Anyone know how to fix, or how to go around it?
As AmeliaBR's comment indicates, you should add this style inside the SVG <object>.
And unless your SVG is very simple, you may have the same issue I had: only seeing a pointer when you are hovering over one of the shapes in the SVG, but not when you're between shapes.
(In some cases you might want that behavior, but for a wordmark, for example, you typically want the whole rectangle to be clickable, not just the individual letters.)
To make the whole rectangle clickable, add svg { cursor: pointer; }. If you just want specific elements clickable, name them by class:
<svg ...>
<style>
svg { cursor: pointer; } /* whole rectangle */
/* OR */
.element-name { cursor: pointer; } /* specific elements */
</style>
...
</svg>