Elemento <a> SVG

Definisci un collegamento ipertestuale utilizzando l'elemento ancore SVG ( <a>). L'elemento SVG <a> viene utilizzato per creare collegamenti all'interno di immagini SVG, e i collegamenti SVG funzionano allo stesso modo dei collegamenti HTML.

Esempio semplice:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a xlink:href="/svg/svg-tutorial.html">
　　　　　　　　<text x="10" y="20">/svg/svg-tutorial.html</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" xlink:show="new">
　　　　　　　　<text x="10" y="40">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="new")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" xlink:show="replace">
　　　　　　　　<text x="10" y="60">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="replace")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_blank">
　　　　　　　　<text x="10" y="80">m/svg/svg-tutorial.html
　　　　　　　　　(target="_blank")</text>
　　　　</a>
　　　　<a xlink:href="/svg/svg-tutorial.html" target="_top">
　　　　　　　　<text x="10" y="100">/svg/svg-tutorial.html
　　　　　　　　　(target="_top")</text>
　　　　</a>
</svg>

Ecco l'immagine di risultato:

Puoi impostare l'attributo su new o replace su <a> per determinare se il contenuto del link deve essere visualizzato in una nuova finestra o sostituire il contenuto della finestra esistente.

Notare che se utilizzi replace e mostri l'immagine SVG all'interno di un iframe, l'iframe sarà il target del link, non la finestra del browser. Se desideri che la finestra del browser invece dell'iframe target apra il link, utilizza l'attributo target con il valore _top.

Puoi anche impostare l'attributo target per informare il browser di aprire il link in un frame o una finestra specifica. Come per le proprietà del link in targetHTML (almeno in teoria). Nota che i browser interpretano i valori dell'attributo target in modo diverso. Per ulteriori dettagli, consulta la parte finale di questa pagina.

Immagini come link

È anche possibile utilizzare le immagini come link. Tutto ciò che devi fare è utilizzare il link che utilizzerai per la forma SVG come link tra i tag <a> e </a>. Ecco un esempio di utilizzo di un rettangolo invece del testo come link:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a xlink:href="/svg/index.html" target="_top">
　　　　　　　　<rect x="10" y="20" width="75" height="30"
　　　　　　　　　　　　　　　　style="stroke: #333366; fill: #6666cc"/>
　　　　</a>
　　　　
</svg>

Ecco l'immagine di risultato: