How to select and can be zoomed using svg.pan-zoom.js?

Question

I use svg.js and svg.pan-zoom.js to make that svg can be zoomed using scroll. like svg.pan-zoom.js's demo (this)

This is my code, just for test.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="svg.js"></script>
    <script src="svgDraggy.js"></script>
    <script src="svgPanzoom.js"></script>
    <style type="text/css">
    #drawing svg {
        width:800px;
        height:400px;
        border:1px solid #333333;
    }
    </style>
</head>
<body>
    <div id = "drawing">
        <svg>
            <g id="canvas">
                 <use xlink:href="space.svg#planet" fill="#19317c"></use>
            </g>

        </svg>
    </div>  

    <script>
        var test = SVG('canvas').panZoom();
        test;
    </script>
</body>
</html>

I used 'use' tag, because SVG what I want to use has complicated shape.

Maybe I have mistake svg select in script, but I don't know how to fix it.

Message in console is

svgPanzoom.js:129 Uncaught TypeError: Cannot read property 'tagName' of undefined

How can I fix it?

score 0 · Accepted Answer · answered Aug 25 '16 at 20:57

The SVG constructor expects a node or an id to a node where the root svg is placed. So in your case it would be SVG('drawing'). However - this would not satisfy your needs since it would create a new svg document. You want to adopt an inline SVG. To do so, try: SVG.get('drawing'). This returns your svg.js instance. Now you can search for your group and call panZoom on it:

var svgDoc = SVG.get('drawing')
svgDoc.select('#canvas').get(0).panZoom()

Alternatively you can just search directly: SVG.select('#canvas').get(0).panZoom(). In case you want panZoom the whole document I guess you have to call it on the svgDoc directly like: SVG.get('drawing').panZoom()

I also suggest to use the official addon svg.draggable.js instead of draggy since it handles transformations a lot more stable.

How to select and can be zoomed using svg.pan-zoom.js?

1 Answers1