缩放到一个元素 - jquery SVG
假设我有一个画布，上面绘制了 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>
`
Say I have a canvas with svg elements drawn on it. Once i click on the element, i need to change the viewport by zooming and focusing on the element clicked. How do i perform this? I have attached the code.
`
<!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>
`
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以在用户单击的元素并相应地调整 SVG 元素的
viewBox（使用preserveAspectRatio="xMidYMid meet"您不必担心比例，但您可能想要添加边框，因为边界框在几何上是紧密的，忽略线宽和密线）。You can use
getBBox()on the element the user clicked and adjust the SVG element'sviewBoxaccordingly (usingpreserveAspectRatio="xMidYMid meet"you don't have to worry about ratio, but you might want to add a border since the bounding box is geometrically tight, ignoring line widths and milters).谢谢。使用此实现：
Thanks. Implemented using this :