Question: 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?

Answer: 
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>

```

2. remove pointer events from `<object>` so all clicks will be triggered on the wrapper element:

```
object {
    pointer-events: none;
}

```
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](https://www.sitepoint.com/svg-styling-with-css/) 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](http://tutorials.jenkov.com/svg/svg-and-css.html#external-css-style-sheets) for more information.