Tenho uma imagem SVG, como posso criar um pequeno zoom (aumentar a imagem) quando passo por cima com o mouse, e voltar ao seu tamanho quando saiu?
Tenho o exemplo: http://jsfiddle.net/twsthyds/37/
Tenho uma imagem SVG, como posso criar um pequeno zoom (aumentar a imagem) quando passo por cima com o mouse, e voltar ao seu tamanho quando saiu?
Tenho o exemplo: http://jsfiddle.net/twsthyds/37/
Você pode obter o resultado desejado usando apenas css se utilizar medidas percentuais dentro do svg.
svg {
cursor: move;
height: 100px;
width: 100px;
}
svg:active {
height: 200px;
width: 200px;
}
<p>Clique na imagem para visualizar o efeito</p>
<svg>
<image id=img1 data-type="img1" xlink:href="http://placehold.it/100x100" x=0 y=0 height=100% width=100% class="img1" />
</svg>
Depende a qual zoom vc se refere. Existem basicamente 2 tipos de ZOOM:
Veja esse link no d3 para ver essas 2 definições na prática.
Dito isso, entende-se que para fazer Zoom In ou Zoom OUT numa IMAGEM SVG, você teria somente que dispara uma função que iria alterar as propriedades do svg de acordo com sua escala e de acordo com o tipo de ZOOM escolhido. SVG são funções matemáticas vetoriais que recebem parâmetros para gerar os contornos, diferentente de imagens raster que são pixels exemplo jpeg, jpg, png, entre outras. Nesse Link vc tem exemplo.
Infelizmente você não tem uma imagem SVG. O que vc tem é um stage SVG com uma imagem png (favicon.png) dentro desse stage. Veja o pedaço do seu código <image id=img1 data-type="img1" xlink:href=/favicon.png
Se você quer usar zomm in ou zoom out em imagens SGV, terá que gerar as imagens com as tags próprias, tais como:
Veja o link do W3.
Se vc quiser continuar usando imagens raster e aplicar o zoom, mude as propriedades CSS. Veja o exemplo.
svg:hover{zoom:200%;}
?