Elemento <a> SVG

Defina un hipervínculo utilizando el elemento de anclaje SVG ( <a>). El elemento SVG <a> se utiliza para crear enlaces en imágenes SVG, los enlaces SVG funcionan de manera similar a los enlaces HTML.

Ejemplo simple:

<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 es la imagen de resultado:

Puede usar-Establezca la propiedad xlink:show en <a> como new o replace para determinar si el contenido al que apunta el enlace debe mostrarse en una nueva ventana o reemplazar el contenido de la ventana existente.

Tenga en cuenta que si utiliza replace y muestra una imagen SVG en iframe, el iframe será el objetivo del enlace, no la ventana del navegador. Si desea que la ventana del navegador en lugar de la ventana objetivo iframe, utilice la propiedad target con el valor _top.

También puede configurar la propiedad target para informar al navegador de que abra el enlace en un cuadro o ventana específica. Al igual que las propiedades del enlace en targetHTML (al menos en teoría). Tenga en cuenta que el navegador interpreta los valores de la propiedad target de manera diferente. Para más detalles, consulte la última parte de esta página.

El gráfico como enlace

También se puede usar gráficos como enlaces. Todo lo que tienes que hacer es usar el enlace que se utilizará para la forma SVG como <a> y </El enlace entre las etiquetas <a>. Este es un ejemplo que utiliza un rectángulo en lugar de texto como enlace:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a xlink:href="/svg/index.html" objetivo="_top">
　　　　　　　　<rect x="10" y="20" ancho="75" altura="30"
　　　　　　　　　　　　　　　　estilo="trazo: #333366; relleno: #6666cc"/>
　　　　</a>
　　　　
</svg>

Esta es la imagen de resultado: