faça um objeto svg html também um link clicável

Eu tenho um objeto SVG na minha página HTML e estou encapsulando-o em uma âncora. Assim, quando a imagem svg é clicada, ele leva o usuário ao link da âncora.

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

Quando eu uso esse bloco de código, clicar no objeto svg não me leva ao google. No IE8 <, o texto da extensão é clicável.

Não quero modificar minha imagem svg para conter tags.

Minha pergunta é: como posso tornar a imagem svg clicável?

A maneira mais fácil é não usar <object>. Em vez disso, use uma tag <img> e a âncora deve funcionar perfeitamente.

Na verdade, a melhor maneira de resolver isso é ... na tag <object>, use:

pointer-events: none;

Nota: Os usuários que possuem o plug-in Bloqueador de anúncios instalado recebem um [Bloco] em forma de tabulação no canto superior direito ao passar o mouse (o mesmo que um banner em flash). Ao definir este css, isso também desaparecerá.

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

Eu tive o mesmo problema e consegui resolver isso:

Quebrando o objeto com um elemento definido para bloquear ou bloquear em linha

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

Adicionando à <a>tag:

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

e para a <span>tag:

display: inline-block;

e para a <object>tag:

position: relative; 
z-index: -1

Veja um exemplo aqui: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

Encontrado via comentário 20 aqui https://bugzilla.mozilla.org/show_bug.cgi?id=294932

Gostaria de ter crédito por isso, mas encontrei uma solução aqui:

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

adicione o seguinte ao css da âncora:

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>

O link funciona no svg e no fallback.

Você também pode colocar algo assim na parte inferior do seu SVG (logo antes da </svg>tag de fechamento ):

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

Em seguida, basta alterar o link para se adequar. Eu usei 100% de largura e altura para cobrir o SVG em que ele se encontra. O crédito pela técnica é do pessoal inteligente do Clearleft.com - foi onde eu o vi pela primeira vez.

Uma simplificação da solução de Richard. Funciona pelo menos no Firefox, Safari e Opera:

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

Consulte http://www.noupe.com/tutorial/svg-clickable-71346.html para obter soluções adicionais.

Para fazer isso em todos os navegadores, você precisa usar uma combinação dos métodos @energee, @Richard e @Feuermurmel.

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

Adicionando:

• pointer-events: none; faz funcionar no Firefox.
• display: block; faz funcionar no Chrome e no Safari.
• z-index: 1; z-index: -1; também funciona no IE.

Eu resolvi isso editando o arquivo svg também.

Embrulhei o xml do gráfico svg inteiro em uma tag de grupo que possui um evento click da seguinte maneira:

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

A solução funciona em todos os navegadores que suportam o script svg de objeto. (use como padrão uma tag img dentro do elemento do objeto para navegadores que não suportam svg e você cobrirá toda a gama de navegadores)

Eu tentei esse método fácil e limpo e parece funcionar em todos os navegadores. Dentro do arquivo svg:

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

Só não use <object>. Aqui está uma solução que funcionou para mim com <a>e <svg>tags:

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

Faça isso com javascript e adicione um onClickatributo ao seu 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>