faire un object html svg aussi un lien cliquable

J’ai un object SVG dans ma page HTML et je l’enveloppe dans une ancre. Lorsque l’utilisateur clique sur l’image svg, il amène l’utilisateur au lien d’ancrage.

  Your browser doesn't support SVG images   

Lorsque j’utilise ce bloc de code, cliquer sur l’object svg ne m’amène pas à google. Dans IE8 <le texte de la plage est cliquable.

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

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

Le plus simple est de ne pas utiliser . Utilisez plutôt une balise et l’ancre devrait fonctionner correctement.

En fait, la meilleure façon de résoudre ce problème est https://stackoverflow.com/questions/11374059/make-an-html-svg-object-also-a-clickable-link/… sur la balise , utilisez:

 pointer-events: none; 

Remarque: Les utilisateurs dont le plug-in Ad Blocker est installé obtiennent un bloc [Bloc] dans le coin supérieur droit lors du survol (identique à celui d’une bannière Flash). Par réglages ce css, ça va disparaître aussi.

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

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 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; }      

Le lien fonctionne sur le svg et sur le repli.

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

Envelopper l’object avec un ensemble d’éléments à bloquer ou à insérer dans un bloc

      

Ajouter à la balise :

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

et à la :

 display: inline-block; 

et à la :

 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

Vous pouvez également coller quelque chose comme ceci au bas de votre SVG (juste avant la ):

    

Ensuite, modifiez simplement le lien en conséquence. J’ai utilisé 100% de largeur et de hauteur pour couvrir le SVG dans lequel il se trouve. Le crédit pour cette technique revient aux gens intelligents de Clearleft.com – c’est là que je l’ai vu pour la première fois.

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

    

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

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

    

Ajouter:

  • pointer-events: none; le fait fonctionner dans Firefox.
  • display: block; il fonctionne dans Chrome et Safari.
  • z-index: 1; z-index: -1; ça marche aussi dans IE.

J’ai résolu ce problème en éditant également le fichier svg.

J’ai enveloppé le xml du graphique svg entier dans une balise de groupe qui a un événement de clic comme suit:

      

La solution fonctionne dans tous les navigateurs qui prennent en charge le script svg object. (par défaut une balise img dans votre élément object pour les navigateurs qui ne supportent pas svg et vous couvrirez toute la gamme des navigateurs)

J’ai essayé cette méthode simple et facile et semble fonctionner dans tous les navigateurs. Dans le fichier svg:

Faites-le avec JavaScript et ajoutez un onClick onClick à votre object -element:

  Your browser doesn't support SVG images