fai di un oggetto html svg anche un link cliccabile

Ho un oggetto SVG nella mia pagina HTML e lo sto avvolgendo in un'ancora, quindi quando si fa clic sull'immagine svg porta l'utente al collegamento dell'ancora.

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

Quando utilizzo questo blocco di codice, fare clic sull'oggetto svg non mi porta su Google. In IE8 <è possibile fare clic sul testo dell'intervallo.

Non voglio modificare la mia immagine svg per contenere tag.

La mia domanda è: come posso fare clic sull'immagine svg?

Il modo più semplice è di non usare <oggetto>. Invece usa un tag <img> e l'ancoraggio dovrebbe funzionare bene.

In realtà, il modo migliore per risolverlo è ... sul tag <object>, usa:

pointer-events: none;

Nota: gli utenti che hanno installato il plug-in Ad Blocker ottengono un [Block] simile a una scheda nell'angolo in alto a destra al passaggio del mouse (lo stesso di un banner flash). In base alle impostazioni, questo CSS andrà anche via.

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

Ho avuto lo stesso problema e sono riuscito a risolverlo:

Avvolgere l'oggetto con un elemento impostato su block o inline-block

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

Aggiunta al <a>tag:

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

e al <span>tag:

display: inline-block;

e al <object>tag:

position: relative; 
z-index: -1

Vedi un esempio qui: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

Trovato tramite commento 20 qui https://bugzilla.mozilla.org/show_bug.cgi?id=294932

Mi piacerebbe prendermi il merito per questo, ma ho trovato una soluzione qui:

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

aggiungere quanto segue al CSS per l'ancoraggio:

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>

Il collegamento funziona su svg e sul fallback.

Potresti anche applicare qualcosa di simile nella parte inferiore del tuo SVG (proprio prima del </svg>tag di chiusura ):

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

Quindi basta modificare il collegamento per adattarlo. Ho usato la larghezza e l'altezza del 100% per coprire l'SVG in cui si trova. Il merito della tecnica va alla gente intelligente su Clearleft.com - è lì che l'ho visto per la prima volta.

Una semplificazione della soluzione di Richard. Funziona almeno in Firefox, Safari e Opera:

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

Vedi http://www.noupe.com/tutorial/svg-clickable-71346.html per soluzioni aggiuntive.

A tale scopo, è necessario utilizzare una combinazione di metodi @energee, @Richard e @Feuermurmel in tutti i browser.

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

Aggiunta:

• pointer-events: none; lo fa funzionare in Firefox.
• display: block; funziona su Chrome e Safari.
• z-index: 1; z-index: -1; lo fa funzionare anche in IE.

Ho risolto questo problema modificando anche il file svg.

Ho racchiuso l'xml dell'intera grafica svg in un tag di gruppo che ha un evento click come segue:

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

La soluzione funziona in tutti i browser che supportano lo script svg di oggetti. (predefinito un tag img all'interno dell'elemento object per i browser che non supportano svg e coprirai la gamma dei browser)

ho provato questo metodo semplice e pulito e sembra funzionare in tutti i browser. All'interno del file svg:

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

Basta non usare <object>. Ecco una soluzione che ha funzionato per me con <a>e <svg>tag:

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

Fallo con JavaScript e aggiungi un onClickattributo al tuo objectelemento:

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