Приблизить элемент - 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>

`


svg jquery jquery-svg
person Srikrishnan Suresh    schedule 27.01.2012    source источник
comment
Обычно это называется масштабированием и панорамированием. Попробуйте поискать в Google zoom pan svg, и вы найдете множество ответов. Также проверьте этот пост: stackoverflow.com/questions/8711536/   -  person bennedich    schedule 27.01.2012

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать 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(' '));
}
person pascal    schedule 28.01.2012

arrow_upward
1
arrow_downward

Спасибо. Реализовано с помощью этого:

var b = event.target.getBBox(); 
var svg = document.getElementById('svgcanvas'); 
svg.setAttribute("viewBox", b.x+" "+b.y+" "+b.width+" "+b.height);
person Srikrishnan Suresh    schedule 06.02.2013
comment
а как же кроссбраузерность? setAttribute viewBox доступен глобально? - person realtebo; 05.06.2013