使用鼠标滚轮放大到svg中的特定区域。

Question

我的asp.net网站中嵌入了一个简单的svg地图。我想使用mousewheel来放大和缩小该地图。

我已经在一定程度上实现了使用mousewheel.js的缩放功能，但问题是，我无法让地图缩放到特定区域。

但问题是，我无法让地图放大到特定区域，而是整个地图都在增长。

SVG

<div id="divmap">
    <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>     
</div>

JS

$(document).ready(function () { 
$("#divmap").bind('mousewheel', function (event, delta) {
                var divheight = $('svg').height();
                if ((divheight - 50) > 100) {
                    var delta_px = delta > 0 ? "+=50" : "-=50";
                    if (delta < 10) {
                        var options = { height: delta_px, width: delta_px };
                        $('svg').css({
                            width: delta_px,
                            height: delta_px

                        });                        
                    }
                }
     });
});

http:/jsfiddle.netTjq8X1

如何实现像我们在谷歌地图中的特定区域的缩放？