缩放到元素 – jquery SVG

假设我有一个画有svg元素的canvas。 一旦我点击元素，我需要通过缩放和聚焦点击的元素来更改视口。 我该怎么做？ 我附上了代码。

`

      #svgbasics { width: 1250px; height: 500px; border: 1px solid black; }     var selectedItem=""; $(function() { $('#viewport').svg({onLoad: drawInitial}); }); function drawInitial(svg) { svg.circle(75, 75, 50, {onclick: "clickListener()",fill: 'none', stroke: 'red', 'stroke-width': 3}); var g = svg.group({onclick: "select(evt)",stroke: 'black', 'stroke-width': 2}); svg.line(g, 15, 75, 135, 75,{onclick: "select(evt)"}); svg.line(g, 75, 15, 75, 135,{onclick: "select(evt)"}); } function clickListener() { //code to change the viewport to this element }    
jQuery SVG
 
    
 
 
   

`

Answer 1

您可以在用户单击的元素上使用getBBox()并相应地调整SVG元素的viewBox （使用preserveAspectRatio="xMidYMid meet"您不必担心比率，但您可能想要添加边框，因为边界框是几何紧，忽略线宽和毫米）。

 function clickListener(event) { var b = event.target.getBBox(); $('#viewport > svg')[0].setAttribute('viewBox', [bx, by, b.width, b.height].join(' ')); } 

Answer 2

谢谢。 使用此实现：

 var b = event.target.getBBox(); var svg = document.getElementById('svgcanvas'); svg.setAttribute("viewBox", b.x+" "+b.y+" "+b.width+" "+b.height);