Увеличить элемент - jquery SVG - PullRequest
Новая
       11

Увеличить элемент - jquery SVG

2 голосов
/ 27 января 2012

Скажем, у меня есть холст с элементами 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>

`

Ответы [ 2 ]

3 голосов
/ 28 января 2012

Вы можете использовать getBBox() на элементе, на котором щелкнул пользователь, и соответственно отрегулировать viewBox элемента SVG (используя 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(' '));
}
0 голосов
/ 06 февраля 2013

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

var b = event.target.getBBox(); 
var svg = document.getElementById('svgcanvas'); 
svg.setAttribute("viewBox", b.x+" "+b.y+" "+b.width+" "+b.height);
...