fai di un oggetto html svg anche un link cliccabile


143

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?

Risposte:


20

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


1
Il tag img normalmente andrebbe dove si trova il tag span per questo degradare con grazia.
Adrian Garner,

18
L'idea non è quella di visualizzare un vettore svg, non un'immagine?
Luca,

7
@ ErikDahlström ma <img>con un riferimento a dati svg non sempre funziona come ci si aspetta, anche nella sua ultima versione di Chrome :( stackoverflow.com/questions/15194870/...
dshap

15
Come sottolineato da @energee, puoi usare il <object>tag e aggiungere un point-event: none;per renderlo selezionabile. Conserva l'accesso al tuo codice sorgente svg e ti consente di manipolarlo dinamicamente.
Antoine,

1
L'uso di a imgnon è sempre un'opzione. Nel mio caso, ho bisogno di manipolare lo svg, che non può essere fatto correttamente tramite img, devo usare object.
Martijn,

216

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/


4
Nota: IE non supporterà eventi puntatore su elementi regolari fino a IE 11, ma già li supporta su SVG. Vedi caniuse.com/pointer-events
webdesserts il

9
Uno svantaggio di questa soluzione (e anche quella di noelmcg) è se il tuo file SVG contiene regole CSS con un selettore: hover, queste regole smetteranno di funzionare. La soluzione proposta da Ben Frain non presenta questo problema.
MathieuLescure,

6
Questa dovrebbe essere una risposta approvata. L'uso imgcon svg rende quindi inutilizzabile per modificare gli stili SVG interni.
Cadavre,

3
Questa deve essere la risposta approvata! Davvero bello, grazie
Daniel Broughan,

5
Bella risposta. Ho reso il mio universale con questo nel CSS globale. object [type * = "svg"] {pointer-events: none}
Gregor Macgregor

40

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


1
Scuse, ho dimenticato il display: inline-block / block element per avvolgere l'oggetto
Richard

1
La migliore soluzione qui!
Baldráni,

questa è la soluzione migliore per questo problema e funziona su tutti i browser
Kalpesh Popat

1
se l'immagine ha un bg trasparente, quei bit non appaiono cliccabili
sobelito,

Questo ha funzionato per me, ho anche dovuto aggiungere altezza: 100% agli elementi a e span nella mia situazione
sk03

32

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.


2
Questa è la soluzione più semplice e più supportata nell'opinione
Type-Style

3
questo ha ancora un problema: gli eventi del puntatore SVG (animazioni) non funzionano più (passaggio del mouse, passaggio del mouse, clic)! Proprio come semplicemente usando gli eventi puntatore: nessuno sull'oggetto stesso ...
qdev

26

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.


2
Ho stili CSS con un selettore: hover incorporato nel mio file SVG. Questa è l'unica soluzione che non disattiva lo stile.
MathieuLescure,

21

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.


3
Grazie, avevo bisogno che il display fosse impostato su blocko inline-blocksul genitore <a>.
element119,

Buon collegamento: noupe.com/inspiration/tutorials-inspiration/… ha pro e contro per ogni soluzione.
Serge Stroobandt,

Ho anche avuto bisogno di usare inline-blockin alcuni casi, ma blocksembrava funzionare bene in altri casi; Immagino che dipenda dai blocchi racchiusi ...
Gwyneth Llewelyn,

9

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.

@janaspage Non sono sicuro ... Non l'ho provato su Internet Explorer 10. Fammi sapere se funziona :)
ChristopherStrydom

@jaepage Non dovrebbe importare, perché objectora si troverà in un contesto di stacking inferiore (sotto) rispetto al suo genitore.
Jason T Featheringham,

funziona su un iPhone / cellulare? non per me. non cliccabile / toccabile
bafromca

3

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)


Hai trovato che l'aggiunta dell'onclick <svg>all'elemento esterno e il suo non avvolgimento non funzionava affatto?
Robert Longson,

1
Puoi usare anche gli eventi dell'elemento svg root. oltre agli eventi onclick utilizzo onmouseout, ontouchstart, ontouchend ecc ... e come per l'elemento svg root utilizzo spesso l'evento onload. La soluzione di Ben Frain di seguito prevede il disegno di un oggetto di copertina aggiuntivo (un rettangolo) per acquisire gli eventi clic ... quindi ho offerto questa soluzione che mostra come ottenere eventi sugli elementi del disegno stessi senza dover creare una copertina trasparente solo per ottenere un evento clic. Particolarmente utile quando non si desidera disegnare un altro elemento o si desidera che gli eventi siano specifici della forma esistente e non di un rettangolo.
Bruce Pezzlo,

3

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>
  


Il seguente spazio dei nomi 'xlink' dovrà essere aggiunto all'elemento svg per farlo funzionare: xmlns: xlink = " w3.org/1999/xlink "
Mere Development

Nessuna delle altre soluzioni ha funzionato per me, ma questa ha funzionato, wow, grazie!
ByteMyPixel,

Anche se di solito non esitano a cambiare un file SVG direttamente, nel mio scenario, utilizzare la stessa SVG per diversi diversi link - il che significa che in teoria, avrei dovuto creare uno SVG diverso per ciascuno di essi. In alternativa, ovviamente, potrei aggiungere il bit grafico in linea nel tag <svg>, ma odio il codice duplicato (anche se l'SVG effettivo che ho è piccolo ...)
Gwyneth Llewelyn,

0

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>

a proposito sto usando Tailwind CSS.
Ege Hurturk,

-5

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>

Ho provato questo, sia con che senza i tag <a> circostanti, e non riesco a farlo funzionare. Ho provato in FF e Chrome su Linux. In quale browser hai provato questo?
iancoleman,

6
Sarebbe bello se tu potessi provarlo e confermare che funziona così gli altri che leggono questo possono essere sicuri della tua risposta. "Deve funzionare" va bene in teoria, ma per me deve funzionare in pratica.
Iancoleman,

Ho appena provato questo su Chrome 45 su Windows e sembra funzionare bene. Ho aggiunto onClick direttamente a un tag SVG senza un ancoraggio a capo. Sarebbe bello se i downvotes spiegassero il perché.
Insegui il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.