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


143

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?

Respostas:


20

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


1
A tag img normalmente iria para a tag span para degradar normalmente.
Adrian Garner

18
A ideia não é exibir um vetor svg, não uma imagem?
Lucas

7
@ ErikDahlström mas <img>com uma referência a dados SVG nem sempre funciona como você espera, mesmo na versão mais recente do Chrome :( stackoverflow.com/questions/15194870/...
dshap

15
Como o @energee apontou, você pode usar a <object>tag e adicionar a point-event: none;para torná-la clicável. Ele preserva o acesso ao seu código fonte svg e permite que você o manipule dinamicamente.
Antoine

1
Usar um imgnem sempre é uma opção. No meu caso, eu preciso manipular o svg, que não pode ser feito corretamente via img, eu tenho que usar object.
Martijn

216

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/


4
Nota: O IE não suporta eventos de ponteiro em elementos regulares até o IE 11, mas já os suporta no SVG. Veja caniuse.com/pointer-events
webdesserts

9
Uma desvantagem desta solução (e a do noelmcg também) é que se o seu arquivo SVG contiver regras CSS com um seletor: hover, essas regras deixarão de funcionar. A solução proposta por Ben Frain não tem esse problema.
precisa

6
Essa resposta deve ser aprovada. O uso imgcom svg torna inutilizável a alteração dos estilos SVG internos.
Cadavre

3
Essa precisa ser a resposta aprovada! Muito bom, graças
Daniel Broughan

5
Ótima resposta. Eu fiz o meu universal com isso no CSS global. objeto [tipo * = "svg"] {eventos-ponteiro: nenhum}
Gregor Macgregor 29/02

40

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


1
Desculpas, esqueci o display: inline-block elemento / bloco para embrulhar ao redor do objeto
Richard

1
Melhor solução aqui!
Baldráni

Esta é a melhor solução para este problema e funciona em todos os navegadores
#

1
se a imagem tem bg transparente, em seguida, esses bits não aparecem clickable
sobelito

Isso funcionou para mim, eu também tive que adicionar height: 100% aos elementos um e span na minha situação
sk03

32

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.


2
Esta é a solução mais fácil e apoiada na opinião
Tipo-Style

3
isso ainda tem um problema: os eventos do ponteiro SVG (animações) não estão mais funcionando (mouseover, mouseout, clique)! Assim como simplesmente usando ponteiro-eventos: nenhum no próprio objeto ...
qdev

26

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.


2
Eu tenho estilos css com um seletor: hover incorporado no meu arquivo SVG. Esta é a única solução que não desativa o estilo.
MathieuLescure

21

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.


3
Obrigado, eu precisava da tela configurada para blockou inline-blockno pai <a>.
element119

Bom link: noupe.com/inspiration/tutorials-inspiration/… tem prós e contras para cada solução.
Serge Stroobandt

Eu também precisava usar inline-blockem alguns casos, mas blockparecia funcionar bem em outros casos; Acho que depende dos blocos anexos ...
Gwyneth Llewelyn

9

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.

@janaspage Eu não tenho certeza ... Eu não tentei sair no IE 10. Deixe-me saber se ele funciona :)
ChristopherStrydom

@jaepage Não deve importar, porque objectagora estará em um contexto de empilhamento menor (abaixo) do que o pai.
Jason T Featheringham

isso funciona em um iPhone / celular? não para mim. não clicável / tocável
bafromca 8/17

3

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)


Você achou que adicionar o onclick ao <svg>elemento externo e não envolvê-lo não funcionou?
Robert Longson

1
Você também pode usar os eventos do elemento raiz svg. além dos eventos onclick, eu uso onmouseout, ontouchstart, ontouchend etc ... e quanto ao elemento svg raiz, eu uso o evento onload frequentemente. A solução de Ben Frain abaixo envolve desenhar um objeto de capa extra (um retângulo) para capturar os eventos de clique ... então eu ofereci esta solução mostrando eventos de obtenção dos elementos de desenho em si sem precisar fazer uma capa transparente apenas para obter um evento de clique. Especialmente útil quando você não deseja desenhar outro elemento ou deseja os eventos específicos para a forma existente e não um retângulo.
Bruce Pezzlo

3

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>
  


O seguinte espaço para nome 'xlink' terá que ser adicionado ao elemento svg para fazer este trabalho: xmlns: xlink = " w3.org/1999/xlink "
Mere Development

Nenhuma das outras soluções funcionou para mim, mas esta funcionou, uau, obrigado!
ByteMyPixel

Embora eu normalmente não tenha escrúpulos em alterar um arquivo SVG diretamente, no meu cenário, eu uso o mesmo SVG para vários links diferentes - o que significa que, teoricamente, eu teria que criar um SVG diferente para cada um. Como alternativa, é claro, eu poderia adicionar o bit gráfico inline na tag <svg>, mas odeio código duplicado (mesmo que o SVG real que eu tenho seja pequeno ...)
Gwyneth Llewelyn

0

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>

btw eu estou usando tailwind css.
Ege Hurturk

-5

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>

Eu tentei isso, com e sem as tags <a> circundantes, e não consigo fazer isso funcionar. Eu tentei no FF e Chrome no Linux. Em qual navegador você tentou isso?
Iancoleman

6
Seria ótimo se você pudesse experimentá-lo e confirmar que funciona para que outras pessoas que leem isso possam confiar na sua resposta. "Deve funcionar" é bom em teoria, mas para mim deve funcionar na prática.
iancoleman

Eu apenas tentei isso no Chrome 45 no Windows e parece funcionar bem. Adicionei onClick diretamente a uma tag SVG sem uma âncora de empacotamento. Seria bom se os votos negativos explicassem o porquê.
Perseguição
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.