缩放到一个元素 - jquery SVG

说我有一个绘制svg元素的画布。一旦我点击元素，我需要通过缩放和聚焦点击元素来改变视口。我如何执行此操作？我附上了代码。缩放到一个元素 - jquery SVG

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
     <title>jQuery SVG</title> 
     <style type="text/css"> 
      #svgbasics 
      { 
       width: 1250px; 
       height: 500px; 
       border: 1px solid black; 
      } 
     </style> 
     <script type="text/javascript" src="js/jquery.min.js"></script> 
     <script type="text/javascript" src="js/jquery.svg.js"></script> 
     <script type="text/javascript"> 
      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 
      } 
      </script> 
    </head> 
    <body> 
     <h1>jQuery SVG</h1> 
     <div id="svgbasics" tabindex="0" onclick="this.focus()"> 
      <g id="viewport"> 
       <input type="button" value="Click me" onclick="clickListener()"/> 
      </g> 
     </div> 
     <p> 

     </p> 

    </body> 
</html>

来源

2012-01-27 Srikrishnan

这通常被称为“缩放和平移”。试试谷歌搜索'zoom pan svg'，你会发现很多答案。另外检查这篇文章：http://stackoverflow.com/questions/8711536/embedding-a-zoom-box-in-an-svg-image – bennedich 2012-01-27 09:42:37

谢谢。使用这个实现：

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

来源

2013-02-06 11:57:46 Srikrishnan

跨浏览器呢？ setAttribute“viewBox”是否全局可用？ – realtebo 2013-06-05 12:40:57

您可以使用用户点击的元素上getBBox()和SVG元素的viewBox相应（使用preserveAspectRatio="xMidYMid meet"你不必担心比率调整，但您可能由于边界框在几何上紧密，因此忽略线条宽度和更短的距离而需要添加边框）。

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

来源

2012-01-28 04:16:19 pascal

缩放到一个元素 - jquery SVG

回答

相关问题