缩放到元素-jQuery SVG [英] Zoom to an element - jquery SVG
本文介绍了缩放到元素-jQuery SVG的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
说我有一块画布，上面画有svg元素.单击该元素后，我需要通过缩放并集中单击所单击的元素来更改视口.我该如何执行呢?我已经附上了代码.
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>
`
推荐答案
谢谢.使用此实现:
var b = event.target.getBBox();
var svg = document.getElementById('svgcanvas');
svg.setAttribute("viewBox", b.x+" "+b.y+" "+b.width+" "+b.height);
这篇关于缩放到元素-jQuery SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
