Cursor: pointer; on svg element is not working

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>

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)