html - página - hacer que un objeto svt svg también sea un enlace cliqueable

hipervinculos en html ejemplos

Question

Tengo un objeto SVG en mi página HTML y lo estoy envolviendo en un ancla para que cuando se haga clic en la imagen svg lleve al usuario al enlace de anclaje.

<a href="http://www.google.com/">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn''t support SVG images</span>
    </object>
</a>

Cuando uso este bloque de código, hacer clic en el objeto svg no me lleva a google. En IE8 <se puede hacer clic en el texto span.

No quiero modificar mi imagen svg para que contenga etiquetas.

Mi pregunta es, ¿cómo puedo hacer que se haga clic en la imagen svg?

Answer 1

En realidad, la mejor manera de resolver esto es ... en la etiqueta <object>, use:

pointer-events: none;

Nota: Los usuarios que tienen el complemento de Ad Blocker instalado obtienen un [Bloque] similar a una pestaña en la esquina superior derecha al pasar el ratón (lo mismo que se obtiene con un banner flash). Al configurar este CSS, eso desaparecerá también.

http://jsfiddle.net/energee/UL9k9/

Answer 2

Hazlo con javascript y agrega un onClick -attribute a tu object -elemento:

<object data="mysvg.svg" type="image/svg+xml" onClick="window.location.href=''http://google.at'';">
    <span>Your browser doesn''t support SVG images</span>
</object>

Answer 3

Intenté este método fácil y limpio y parece funcionar en todos los navegadores. Dentro del archivo svg:

<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
  
<!--your graphic-->
  
</a>
</svg>
  

Answer 4

La forma más fácil es no usar <objeto>. En su lugar, use una etiqueta <img> y el anclaje debería funcionar bien.

Answer 5

Lo resolví editando el archivo svg también.

Envolví el xml de todo el gráfico svg en una etiqueta de grupo que tiene un evento de clic de la siguiente manera:

<svg .....>
<g id="thefix" onclick="window.top.location.href=''http://www.google.com/'';">
 <!-- ... your graphics ... -->
</g>
</svg>

La solución funciona en todos los navegadores compatibles con el script svg del objeto. (Por defecto, una etiqueta img dentro de su elemento de objeto para navegadores que no son compatibles con svg y cubrirá toda la gama de navegadores)

Answer 6

Me gustaría tomar el crédito por esto, pero encontré una solución aquí:

https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable

agregue lo siguiente al CSS para el ancla:

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


<a href="#" class="svg">
  <object data="random.svg" type="image/svg+xml">
    <img src="random.jpg" />
  </object>
</a>

El enlace funciona en el svg y en el repliegue.

Answer 7

Para lograr esto en todos los navegadores necesitas usar una combinación de métodos @energee, @Richard y @Feuermurmel.

<a href="" style="display: block; z-index: 1;">
    <object data="" style="z-index: -1; pointer-events: none;" />
</a>

Agregar:

• pointer-events: none; lo hace funcionar en Firefox.
• display: block; funciona en Chrome y Safari.
• z-index: 1; z-index: -1; lo hace funcionar en IE también.

Answer 8

También podría pegar algo así en la parte inferior de su SVG (justo antes de la etiqueta de cierre </svg> ):

<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
    <rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>

Luego solo modifica el enlace para que se adapte. He utilizado el 100% de ancho y alto para cubrir el SVG en el que se encuentra. El crédito para la técnica es para la gente inteligente de Clearleft.com, ahí es donde lo vi por primera vez.

Answer 9

Tuve el mismo problema y logré resolver esto al:

Envolviendo el objeto con un elemento configurado para bloquear o bloquear en línea

<a>
    <span>
        <object></object>
    </span>
</a>

Agregar a la etiqueta <a> :

display: inline-block;
position: relative; 
z-index: 1;

y a la etiqueta <span> :

display: inline-block;

y a la etiqueta <object> :

position: relative; 
z-index: -1

Vea un ejemplo aquí: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

Encontrado a través del comentario 20 aquí https://bugzilla.mozilla.org/show_bug.cgi?id=294932

Answer 10

Una simplificación de la solución de Richard. Funciona al menos en Firefox, Safari y Opera:

<a href="..." style="display: block;">
    <object data="..." style="pointer-events: none;" />
</a>

Consulte http://www.noupe.com/tutorial/svg-clickable-71346.html para obtener soluciones adicionales.