2017-10-19 4 views
0

別の画像を拡大し、私は(SVG形状をクリックしている探しています何クリックSVG形状は、と私は同じ画像で画像を拡大する例の多くを見てきた

$("#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/

画像の代わりに)拡大して、別の画像を表示することができます(以前は同じ画像を表示する代わりに)。

私はこれを行うためにjqueryを使用しています。

+0

SVGは画像と同じように扱われます。通常はJPGやPNGの代わりにSVGとして使用し、それに応じて幅や高さを設定してください。 – freeworlder

+0

@freeworlderの解決策はおそらく最も簡単です(画像をSVGとして保存し、どこかに置き、img srcに.svgを使用するだけです)。しかし、クリックリスナーをSVG要素にもアタッチすることができます。例:https://jsfiddle.net/xq8f18b5/ –

答えて

0

SVGは、どのブラウザでも画像として正確に扱われます。それに応じて画像とサイズを指定するだけでSVGを参照できます。

<img src="images/vector.svg" style="width:400ps;height:400px/> 
関連する問題