Zoom auf ein element - jquery SVG

Sagen, dass ich eine Leinwand mit svg-Elementen gezeichnet ist. Sobald ich Sie auf das element, brauche ich zum ändern der Ansicht durch Zoomen und Fokussierung auf das element geklickt wird. Wie führe ich diese? Ich habe anbei der 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>

`

InformationsquelleAutor Srikrishnan | 2012-01-27
  1. 3

    Können Sie getBBox() auf das element der Anwender angeklickt und anpassen des SVG-Elements viewBox entsprechend (mit preserveAspectRatio="xMidYMid meet" Sie nicht haben, um sorgen über das Verhältnis, aber möchten Sie vielleicht, um einen Rahmen hinzuzufügen, da die bounding-box ist geometrisch eng, Ignoriere Linienstärke und milters).

    function clickListener(event) {
  var b = event.target.getBBox();
  $('#viewport > svg')[0].setAttribute('viewBox',
    [b.x, b.y, b.width, b.height].join(' '));
}
    InformationsquelleAutor pascal
  2. 0

    Dank. Umgesetzt mit diesem : 

    var b = event.target.getBBox(); 
var svg = document.getElementById('svgcanvas'); 
svg.setAttribute("viewBox", b.x+" "+b.y+" "+b.width+" "+b.height);
    • was ist cross-browser ? setAttribute "viewBox" ist global verfügbar?
    InformationsquelleAutor Srikrishnan
Schreibe einen Kommentar