Zoom in out mousedown

Asked

Viewed 90 times

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/

javascript svg

  • Have you tested svg:hover{zoom:200%;} ?

  • .img1:Hover{zoom:200%;} does not work for me

  • Not because it is SVG, but because it is: http://jsfiddle.net/twsthyds/39/, this is what you are looking for?

  • Yes I think that’s it, but I don’t see the picture

2 answers

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:

  1. Geometric Zoom -> The displayed image stores its unchanging physical proportions.
  2. Zoom Semantic -> Image proportions adapt to scale.

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:

  1. Rectangle
  2. Circle
  3. Ellipse
  4. Line
  5. Relate the item
  6. Polyline
  7. Polygon
  8. Path

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.