2010-01-18 14 views
10

Non voglio aggiungere un collegamento a uno svg (che non è possibile perché il file svg non è fornito da me), ma voglio aggiungere un collegamento come <a href=""><img src="foo.svg"/></a>. Solo che questa volta non è un img, ma un object (quindi posso includere un svg).Come inserire un oggetto SVG in HTML con collegamenti?

Funziona con alcuni browser, ma ad esempio non con Firefox. Qual è l'idea predefinita su come fare qualcosa del genere?

risposta

11

In Firefox <object> acquisisce tutti i clic e non li lascia "bolle" fuori dal documento SVG. Una soluzione ragionevole è quella di coprire l'SVG con un altro elemento che ottiene il clic per primo.

Fortunatamente questo può essere fatto con puro CSS:

a {position:relative; display:inline-block;} 
a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;} 

Si potrebbe desiderare di aggiungere :-moz-any-link pseudo-classe al selettore per renderlo Gecko-only.

3

mettere il link all'interno del file in formato SVG, invece, per esempio:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<a xlink:href=""> 
    ... 
</a> 
</svg> 
+0

... e se il file è ospitato sullo stesso dominio, e si vuole veramente evitare di modificare il file sul server si può provare qualcosa di simile: var = AELM yourObjectElm.contentDocument.documentElement.createElementNS (" http://www.w3.org/2000/svg "," a "); aElm.href.baseVal = "http://your.link.here.com"; // ... aggiungi tutti i figli di yourObjectElm.contentDocument.documentElement a unElm ... // yourObjectElm.contentDocument.documentElement.appendChild (aElm); –

+0

Javascript non è possibile e non posso modificare il file – user253104

0

Con svgweb è possibile incorporare arbitraria SVG cross-browser, e modificarlo tramite metodi DOM regolari. Ciò include il collegamento di listener di eventi a qualsiasi parte di SVG.

svgweb home page:
http://code.google.com/p/svgweb/

svgweb QuickStart (discute anche l'aggiunta di listener):
http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

Anche se non si può mettere in un tag di ancoraggio tradizionale in questo modo (I non ho provato, potrebbe funzionare), sarete almeno in grado di gestire gli eventi di clic e navigare in base ad essi, il che è davvero ciò che state cercando.

+0

Javascript non è possibile – user253104

Problemi correlati