1
I have a SVG image, as I can create a small zoom (enlarge the image) when I step over with the mouse, and go back to its size when it came out?
I have the example: http://jsfiddle.net/twsthyds/37/
1
I have a SVG image, as I can create a small zoom (enlarge the image) when I step over with the mouse, and go back to its size when it came out?
I have the example: http://jsfiddle.net/twsthyds/37/
1
You can get the desired result using css only if you use percentage measures within 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>
Thanks @goofy, but wanted to not be with the click, just by passing the mousse cm
the event mousedown is for click, so I left it this way, but just you change svg:active
for svg:hover
0
Depends on what zoom you’re referring to. There are basically 2 types of ZOOM:
See this link on D3 to see these 2 definitions in practice.
That being said, it is understood that to do Zoom In or Zoom OUT on an SVG IMAGE, you would only have to trigger a function that would change the properties of svg according to its scale and according to the type of ZOOM chosen. SVG are vector mathematical functions that receive parameters to generate the contours, unlike raster images that are example pixels jpeg, jpg, png, among others. In that Link you have example.
Unfortunately you do not have a SVG image. What you have is a SVG Stage with a png image (favicon.png) within that Stage. See the piece of your code <image id=img1 data-type="img1" xlink:href=/favicon.png
If you want to use zomm in or zoom out on SGV images, you will have to generate the images with your own tags, such as:
See the link to W3.
If you want to continue using raster images and zoom in, change the CSS properties. See example.
Browser other questions tagged javascript svg
You are not signed in. Login or sign up in order to post.
Have you tested
svg:hover{zoom:200%;}
?– Sergio
.img1:Hover{zoom:200%;} does not work for me
– akm
Not because it is SVG, but because it is: http://jsfiddle.net/twsthyds/39/, this is what you are looking for?
– Sergio
Yes I think that’s it, but I don’t see the picture
– akm