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

Dans mon site, j'ai utiliser des éléments svg. Parfois, j'ai besoin d'eux pour être cliquable, donc je veux pointeur curseur au-dessus d'eux.

Cependant l'ajout de la classe css ou le style

cursor: pointer;

pas de travail.

C'est l'exemple de l'élément

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

Il semble tout simplement pas worki avec svg. Quelqu'un sait comment résoudre, ou comment le contourner?

source d'informationauteur Skotnik

  1. 12

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

    Et à moins que votre SVG est très simple, vous avez le même problème que j'ai eu: voyant seulement un pointeur lorsque vous survolez l'une des formes dans le SVG, mais pas quand vous êtes entre les formes.

    (Dans certains cas, vous pourriez voulez que le comportement, mais pour un logo, par exemple, vous souhaitez généralement l'ensemble du rectangle pour être cliquable, et pas seulement les lettres individuelles.)

    Pour rendre l'ensemble du rectangle cliquable, ajouter svg { cursor: pointer; }. Si vous voulez juste des éléments spécifiques cliquable, leur nom par classe:

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

    /* OR */

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

    De style différents éléments dans votre SVG, vous pouvez soit utiliser Javascript ou CSS à l'intérieur de l'image dans les defs de la balise de référence ou d'une feuille de style externe.

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

    Vérifier 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érifier ce lien pour plus d'informations.

  3. 0

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

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

    bien que, idéalement, vous pouvez intégrer du svg dans du html.
    Qui ne vous permet pas de mettre en cache les fichiers svg, donc j'ai trouvé l'utilisation de javascript pour charger le fichier svg en tant que texte et l'insérer dans le DOM permis pour la mise en cache et reste encore de la SVG directement dans le DOM de pouvoir utiliser l'ensemble des styles css à partir de votre page.

  4. 0

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

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

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

    2) supprimer les événements de pointeur de object élément afin de clics seront livrés à l' <a> directement:

    object{
    pointer-events: none;
}

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

    J'ai dû fermer Photoshop pour que le curseur de travail.