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 元素viewBox（使用preserveAspectRatio="xMidYMid meet"时您不必担心比例，但您可能需要添加边框，因为边界框在几何上是紧密的，忽略线宽和 milters）。

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 回答