html - icon - Cómo hacer que los enlaces en un archivo SVG incrustado se abran en la ventana principal, no en un objeto separado

svg html icon

Question

Tengo un archivo SVG (generado por Graphviz ) que contiene enlaces URL. Me gustaría que se pueda hacer clic en estos enlaces. Primero lo intenté

<img src="path/to/my.svg"/>

que muestra la imagen bien, pero no se puede hacer clic en los enlaces. Cambiar a objeto:

 <object data="/path/to/my.svg" type="image/svg+xml">

hace que los enlaces se puedan hacer clic, pero cuando el usuario hace clic en ellos, la nueva página se abre dentro del objeto. ¿Hay alguna forma de que pueda hacer que los enlaces se abran en la ventana principal?

Esto es usando Firefox 5.0, pero si hay diferencias entre navegadores que conoces, ¡apreciaría la advertencia!

Answer 1

En primer lugar, si incorpora SVG como <img> , los navegadores no abrirán enlaces, y tampoco ejecutarán scripts dentro de <img> , porque, bueno, usted incrusta una imagen, y muy probablemente su imagen puede aparecer dentro de un <a> , y no puedes poner enlaces dentro de enlaces.

Y para hacer que los enlaces se abran en pestañas nuevas, puede usar el atributo de target , como en HTML, o xlink específico de xlink:show atributo con el valor new . La especificación de SVG says lo siguiente:

El atributo [xlink: show] se proporciona para compatibilidad con versiones anteriores de SVG 1.1. Proporciona documentación para procesadores compatibles con XLink. En caso de conflicto, el atributo objetivo tiene prioridad, ya que puede expresar un rango más amplio de valores.

Y los valores del atributo target pueden ser:

• _reemplazar
• _yo
• _padre
• _parte superior
• _blanco

Por lo tanto, en su SVG necesita escribir de la siguiente manera:

<a xlink:href="http://example.com" target="_blank">[...]</a>

Pero actualmente todos los navegadores capaces de mostrar SVG son compatibles con target atributos xlink:show y target (aunque no he probado en IE9).