假设我有一个 Canvas ，上面绘制了 svg 元素。单击该元素后，我需要通过缩放并聚焦于单击的元素来更改视口(viewport)。我该如何执行此操作？我已附上代码。
`
<!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>
`
最佳答案
您可以使用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(' '));
}
关于jquery - 缩放到一个元素 - jquery SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9029469/