CODEWITHSUNDEEP
htmlcsssvgmouse-cursor
Skotnik
Skotnik

Reputation: 715

Cursor: pointer; on svg element is not working

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?

Upvotes: 40

Views: 57424

Answers (6)

G4gene
G4gene

Reputation: 1

I had this problem too and solved it with a style sheet fix to the link style. Add cursor: pointer; there. i.e.

a { cursor: pointer; }

Upvotes: -2

godblessstrawberry
godblessstrawberry

Reputation: 5058

I think this is the easiest solution among the others:

  1. wrap svg into <a> or anything else that will receive clicks:
<a href="#">
    <object>
        <embed src="img.svg"></embed>
    </object>
</a>
  1. remove pointer events from <object> so all clicks will be triggered on the wrapper element:
object {
    pointer-events: none;
}

Upvotes: 10

Geoduck
Geoduck

Reputation: 9005

One of the simplest solutions may be to use img tag instead of object tag

<img src="course/ani/male2.svg" style="left: 87px; bottom: 56px;"  />

although, ideally you can embed the svg in the html. That doesn't let you cache the svg files, so I found using javascript to load the svg file as text and insert into the DOM allowed for caching and still got the SVG directly into the DOM so it could use all the css styles from your page.

Upvotes: 1

Havok
Havok

Reputation: 5882

To style individual elements in your SVG you can either use Javascript or use CSS inside the image in the defs tag or reference an external stylesheet.

<svg ...>
  <defs>
    <style type="text/css"><![CDATA[
      .myfigureclass {
        cursor: pointer;
      }
    ]]></style>
  </defs>

Check this link for more information.

You can also use an external stylesheet for your SVG like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.svg.css" ?>

<svg
   xmlns="http://www.w3.org/2000/svg"
   ...>
(...)
</svg>

Check this link for more information.

Upvotes: 2

Herr_Schwabullek
Herr_Schwabullek

Reputation: 790

If adding "cursor: pointer" directly to the svg element does not work, you can either try to add an transparent element (Pseudo elements directly on the object tag do not work) with the same dimensions as the SVG which is absolutely positioned over the SVG. 

a.svg-cursor:before {
content: "";
display: block;
position: absolute;
background-color: transparent;
cursor: pointer;
/* plus width and height of the SVG */
}
<a href="#" class="svg-cursor">
<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" es-character="male2"></object>
</a>

Or you can take an img instead of object and add the "cursor: pointer"-style to the img:

<img id="male2" src="course/ani/male2.svg" style="left: 87px; bottom: 56px;" alt="Description" />

Upvotes: 3

Zach
Zach

Reputation: 1331

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>

Upvotes: 39

Related Questions