faire d'un objet html svg également un lien cliquable

Question

J'ai un objet SVG dans ma page HTML et je l'enveloppe dans une ancre de sorte que lorsque l'on clique sur l'image SVG, l'utilisateur est dirigé vers le lien de l'ancre.

<a href="http://www.google.com/">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>
    </object>
</a>

Lorsque j'utilise ce bloc de code, le fait de cliquer sur l'objet svg ne m'amène pas sur google. Dans IE8< le texte du span est cliquable.

Je ne veux pas modifier mon image svg pour qu'elle contienne des balises.

Ma question est la suivante : comment puis-je rendre l'image svg cliquable ?

Answer 1

En fait, la meilleure façon de résoudre ce problème est... sur la balise <objet>, utilisez :

pointer-events: none;

http://jsfiddle.net/energee/UL9k9/

Answer 2

J'ai eu le même problème et j'ai réussi à le résoudre :

Envelopper l'objet avec un élément réglé sur block ou inline-block

<a>
    <span>
        <object></object>
    </span>
</a>

Ajout à la balise <a> :

position: relative; z-index: 1;

et à la balise <objet> ajouter :

position: relative; z-index: -1

Voir un exemple ici : http://jsfiddle.net/WEbGd/

Trouvé via le commentaire 20 ici https://bugzilla.mozilla.org/show_bug.cgi?id=294932

Answer 3

J'aimerais m'en attribuer le mérite, mais j'ai trouvé une solution ici :

https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable

ajoutez ce qui suit à la css de l'ancre :

a.svg {
  position: relative;
  display: inline-block; 
}
a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}

<a href="#" class="svg">
  <object data="random.svg" type="image/svg+xml">
    <img src="random.jpg" />
  </object>
</a>

Le lien fonctionne sur le svg et sur le fallback.

Answer 4

Une simplification de la solution de Richard. Fonctionne au moins dans Firefox et Safari :

<a href="..." style="display: block;">
    <object data="..." style="pointer-events: none;" />
</a>

Voir http://www.noupe.com/tutorial/svg-clickable-71346.html pour des solutions supplémentaires.

Answer 5

Le plus simple est de ne pas utiliser <objet>. Utilisez plutôt une balise <img> et l'ancre devrait fonctionner parfaitement.