2

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>

`

4

2 に答える 2

3

ユーザーがクリックした要素で使用し、それに応じgetBBox()てSVG要素を調整できます（比率を気にする必要はありませんが、境界ボックスは幾何学的にタイトで、線幅とミルターを無視するため、境界線を追加することをお勧めします）。viewBoxpreserveAspectRatio="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-28T04:16:19.300 に答える
1

ありがとう。これを使用して実装:

var b = event.target.getBBox(); 
var svg = document.getElementById('svgcanvas'); 
svg.setAttribute("viewBox", b.x+" "+b.y+" "+b.width+" "+b.height);
于 2013-02-06T11:57:46.567 に答える