hacer un objeto html svg también un enlace en el que se pueda hacer clic

Tengo un objeto SVG en mi página HTML y lo estoy envolviendo en un ancla, de modo que cuando se hace clic en la imagen svg, lleva al usuario al enlace del ancla.

<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 de extensión.

No quiero modificar mi imagen svg para que contenga etiquetas.

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

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

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

pointer-events: none;

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

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

Tuve el mismo problema y logré resolver esto:

Envolviendo el objeto con un conjunto de elementos para bloquear o bloquear en línea

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

Agregando a la <a>etiqueta:

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

y a la <span>etiqueta:

display: inline-block;

y a la <object>etiqueta:

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

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>

Link funciona en el svg y en el respaldo.

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

<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 modifique el enlace para adaptarlo. He usado el 100% de ancho y alto para cubrir el SVG en el que se asienta. El crédito por la técnica es para las personas inteligentes en Clearleft.com, ahí es donde lo vi por primera vez.

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.

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

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

Agregando:

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

Resolví esto editando el archivo svg también.

Envolví el xml del gráfico svg completo 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 que admiten script de svg de objeto. (por defecto, una etiqueta img dentro de su elemento de objeto para navegadores que no admiten svg y cubrirá la gama de navegadores)

Probé este método sencillo 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>
  

Simplemente no lo uses <object>. Aquí hay una solución que funcionó para mí con <a>y <svg>etiquetas:

<a href="<your-link>" class="mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-red-700 transition duration-150 ease-in-out" aria-label="Notifications">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" 
    height="30"><path class="heroicon-ui" fill="#fff" d="M17 16a3 3 0 1 1-2.83 
    2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1 
    1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3- 
   6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
    </svg>
</a>

Hazlo con javascript y agrega un onClickatributo a tu objectelemento:

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