web-dev-qa-db-fra.com

Curseur: pointeur; sur l'élément svg ne fonctionne pas

Sur mon site, j'utilise des éléments svg. Parfois, j'ai besoin qu'ils soient cliquables, donc je veux que le pointeur se place sur eux.

Cependant, en ajoutant une classe ou un style css

cursor: pointer;

pas travailler.

C'est l'élément exemple

<object id="male2" type="image/svg+xml" data="course/ani/male2.svg" style="left: 87px; bottom: 56px;" es-character="male2"></object>

Il semble que cela ne fonctionne tout simplement pas avec svg. Quelqu'un sait comment réparer, ou comment faire le tour?

htmlcsssvgcursor
15
Skotnik

Comme le commentaire d'AmeliaBR l'indique, vous devez ajouter ce style à l'intérieur du SVG <object>.

Et à moins que votre SVG soit très simple, vous pouvez avoir le même problème que moi: ne voir un pointeur que lorsque vous survolez l'une des formes du SVG, mais pas entre deux formes. 

(Dans certains cas, vous voudrez peut-être ce comportement, mais pour un mot-symbole, par exemple, vous voulez généralement que tout le rectangle soit cliquable, pas seulement les lettres individuelles.)

Pour rendre le rectangle entier cliquable, ajoutez svg { cursor: pointer; }. Si vous voulez seulement des éléments spécifiques cliquables, nommez-les par classe:

<svg ...>
  <style>
    svg { cursor: pointer; } /* whole rectangle */

    /* OR */

    .element-name { cursor: pointer; } /* specific elements */
  </style>
  ...
</svg>
17
Zach

Si l'ajout de "cursor: pointer" directement à l'élément svg ne fonctionne pas, vous pouvez soit essayer d'ajouter un élément transparent (les pseudo-éléments directement sur la balise object ne fonctionnent pas) avec les mêmes dimensions que le SVG qui est positionné de manière absolue par-dessus le 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>

Ou vous pouvez prendre une img au lieu de object et ajouter le style "cursor: pointer" à la img:

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

3
Herr_Schwabullek

Je pense que c'est la solution la plus facile parmi les autres:

1) envelopper svg dans <a> pour le rendre cliquable:

<a href="#">
    <object>
        <embed src="img.svg"></embed>
    </object>
</a>

2) supprimez les événements de pointeur de l'élément object afin que les clics soient transmis directement au <a>:

object{
    pointer-events: none;
}

a{
    display: inline-block; /* or block if you need */
}
2
godblessstrawberry

Pour styliser des éléments individuels dans votre SVG, vous pouvez utiliser Javascript ou CSS dans l’image dans la balise defs ou faire référence à une feuille de style externe.

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

Vérifiez ce lien pour plus d'informations.

Vous pouvez également utiliser une feuille de style externe pour votre SVG comme ceci:

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

Vérifiez ce lien pour plus d'informations.

1
Havok

L'une des solutions les plus simples peut être d'utiliser img tag au lieu de object

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

même si, idéalement, vous pouvez intégrer le svg au format HTML. Cela ne vous permet pas de mettre en cache les fichiers svg, alors j’ai trouvé l’utilisation de javascript pour charger le fichier svg sous forme de texte et l’insérer dans le DOM autorisé pour la mise en cache, tout en conservant le SVG directement dans le DOM pour pouvoir utiliser tous les fichiers css. styles de votre page.

0
Garr Godfrey