Elemento <a> no SVG

Defina um hiperlink usando o elemento de âncora SVG ( <a>). O elemento SVG <a> é usado para criar links dentro de imagens SVG, os links SVG funcionam como os links HTML.

Exemplo simples:

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

Esta é a imagem de resultado:

Você pode usar-Defina a propriedade xlink:show no <a> como new ou replace para determinar se o conteúdo apontado pelo link deve ser exibido em uma nova janela ou substituir o conteúdo da janela existente.

Observe que se você usar replace e exibir o iframe com SVG, o iframe será o alvo do link, não a janela do navegador. Se você desejar que a janela do navegador, em vez da janela de destino iframe, use a propriedade target com o valor _top.

Você também pode configurar a propriedade target para informar o navegador de abrir o link em um quadro específico ou em uma janela específica. Assim como as propriedades de link no targetHTML (pelo menos em teoria). Observe que o navegador interpreta os valores das propriedades de forma diferente. Para mais detalhes, consulte a última parte desta página.

Graph como link

Também pode usar gráficos como links. Tudo o que você precisa fazer é usar a forma SVG que será usada como link <a> e</A tag <a> entre os links. Este é um exemplo que usa retângulo em vez de texto como 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>

Esta é a imagem de resultado: