要素にズーム - jquery SVG - 優秀な図書館

私はそれに描かれたsvg要素を持つキャンバスを持っていると言う。要素をクリックすると、クリックした要素をズームしてフォーカスすることでビューポートを変更する必要があります。どのように私はこれを実行するのですか？私はコードを添付しました。あなたは、ユーザーがクリックした要素にgetBBox()を使用して、比率を心配する必要はありませんが、あなたは可能性がありますpreserveAspectRatio="xMidYMid meet"を使用してそれに応じてSVG要素のviewBoxを（調整することができます要素にズーム - 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

ありがとうございます。

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

バウンディングボックスは幾何学的にきついので、線幅とミルターは無視して境界線を追加したい）。

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

答えて

関連する問題