0

I have been looking at a lot of example for enlarging an image with the same image

$("#imgSmall").click(function(){                                                
    $("#imgBig").attr("src","http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif");
    $("#overlay").show();
    $("#overlayContent").show();
});

$("#imgBig").click(function(){
    $("#imgBig").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});

http://jsfiddle.net/a8c9P/

What I am looking for is clicking SVG shape (instead of an image), and enlarge to show another image (instead of showing the same image previously).

I am using jquery to do this.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
Penny Pang
  • 535
  • 2
  • 8
  • 23
  • SVG is treated the same as an image. Just use as SVG instead of JPG or PNG as normal and set the width/height accordingly. – Colin R. Turner Oct 19 '17 at 22:43
  • The solution @freeworlder mentioned is probably the easiest (just save the image as SVG, place it somewhere, and use .svg in your img src), but you can attach a click listener to an SVG element too. Example: https://jsfiddle.net/xq8f18b5/ –  Oct 19 '17 at 22:52

1 Answers1

0

An SVG is treated exactly as an image in any browser. Just reference the SVG as you would any image and size accordingly:

<img src="images/vector.svg" style="width:400ps;height:400px/>
Colin R. Turner
  • 1,323
  • 15
  • 24