web-dev-qa-db-fra.com

faire un objet html svg aussi un lien cliquable

J'ai un objet SVG dans ma page HTML et je l'enveloppe dans une ancre. Ainsi, lorsque vous cliquez sur l'image svg, l'utilisateur est redirigé vers le lien d'ancrage.

<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, cliquer sur l'objet svg ne me conduit pas à google. Dans IE8 <le texte span est cliquable.

Je ne veux pas modifier mon image svg pour contenir des balises.

Ma question est, comment puis-je rendre l'image svg cliquable?

htmlobjectsvganchor
126
iancoleman

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

22
Erik Dahlström

En fait, le meilleur moyen de résoudre ce problème est ... sur la balise <object>, utilisez:

pointer-events: none;

Remarque: les utilisateurs disposant du plug-in Ad Blocker sont dotés d'un [Block] semblable à une tabulation dans le coin supérieur droit lors du survol (de la même façon qu'une bannière flash est obtenue). Avec les paramètres css, cela disparaîtra également

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

198
energee

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

Envelopper l'objet avec un élément défini sur block ou inline-block

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

Ajout à la balise <a>:

display: inline-block;
position: relative; 
z-index: 1;

et à la balise <span>:

display: inline-block;

et à la balise <object>:

position: relative; 
z-index: -1

Voir un exemple ici: http://dabblet.com/Gist/d6ebc6c14bd68a4b06a6

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

34
Richard

Voudrais prendre le crédit pour cela, mais j'ai trouvé une solution ici:

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

ajoutez ce qui suit au fichier css pour 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 repli.

31
noelmcg

Vous pouvez aussi coller quelque chose comme ça au bas de votre SVG (juste avant la balise </svg> de fermeture):

<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
    <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>

Ensuite, modifiez simplement le lien en conséquence. J'ai utilisé 100% de la largeur et de la hauteur pour couvrir le SVG dans lequel il se trouve. Le mérite de cette technique revient aux gens futés de Clearleft.com - c'est là que je l'ai vue utilisée pour la première fois.

21
Ben Frain

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

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

Voir http://www.noupe.com/tutorial/svg-clickable-71346.html pour d'autres solutions.

18
Feuermurmel

Pour ce faire dans tous les navigateurs, vous devez utiliser une combinaison des méthodes @energee, @Richard et @Feuermurmel.

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

Ajouter:

  • pointer-events: none; le fait fonctionner dans Firefox.
  • display: block; le fait fonctionner dans Chrome et Safari.
  • z-index: 1; z-index: -1; le fait fonctionner également dans IE.
9
ChristopherStrydom

J'ai résolu ce problème en modifiant le fichier svg également.

J'ai enveloppé le xml de l'ensemble du graphique svg dans une balise de groupe comportant un événement de clic, comme suit:

<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
 <!-- ... your graphics ... -->
</g>
</svg>

La solution fonctionne dans tous les navigateurs prenant en charge le script objet svg. (par défaut, une balise img à l'intérieur de votre élément object pour les navigateurs qui ne prennent pas en charge svg et qui couvre toute la gamme des navigateurs)

3
Bruce Pezzlo

j'ai essayé cette méthode simple et propre et semble fonctionner dans tous les navigateurs. Dans le fichier svg:

<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
  
<!--your graphic-->
  
</a>
</svg>
2
Dario Rigon