faire un objet svg html également un lien cliquable

J'ai un objet SVG dans ma page HTML et je l'encapsule dans une ancre, donc lorsque vous cliquez sur l'image svg, l'utilisateur accède au 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 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 balises.

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

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

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

pointer-events: none;

Remarque: les utilisateurs qui ont installé le plugin Ad Blocker obtiennent un onglet [Block] dans le coin supérieur droit lors du survol (le même que celui d'une bannière flash). En paramétrant ce css, cela disparaîtra également.

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

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

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

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

Ajout au <a>tag:

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

et au <span>tag:

display: inline-block;

et au <object>tag:

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

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


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

Link fonctionne sur le svg et sur le fallback.

Vous pouvez également coller quelque chose comme ça au bas de votre SVG (juste avant la </svg>balise 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 largeur et de hauteur pour couvrir le SVG dans lequel il se trouve. Le crédit de la 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:

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

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 également fonctionner dans IE.

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

J'ai enveloppé le xml de tout le graphique svg dans une balise de groupe contenant 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 svg objet. (par défaut, une balise img à l'intérieur de votre élément objet pour les navigateurs qui ne prennent pas en charge svg et vous couvrirez la gamme des navigateurs)

J'ai essayé cette méthode simple et propre et semble fonctionner dans tous les navigateurs. À l'intérieur du fichier svg:

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

Ne l'utilisez pas <object>. Voici une solution qui a fonctionné pour moi avec <a>et les <svg>balises:

<a href="<your-link>" class="mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-red-700 transition duration-150 ease-in-out" aria-label="Notifications">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" 
    height="30"><path class="heroicon-ui" fill="#fff" d="M17 16a3 3 0 1 1-2.83 
    2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 
    1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3- 
   6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
    </svg>
</a>

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

<object data="mysvg.svg" type="image/svg+xml" onClick="window.location.href='http://google.at';">
    <span>Your browser doesn't support SVG images</span>
</object>