如何select<use>并且可以使用svg.pan-zoom.js进行缩放？

Question

我使用 svg.js 和 svg.pan-zoom.js 使 svg 可以使用滚动进行缩放。喜欢 svg.pan-zoom.js 的演示 (this)

这是我的代码，仅供测试。

<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>

我用了'use'标签，因为我要用的SVG形状比较复杂

也许我在脚本中有错误的 svg select，但我不知道如何修复它。

控制台中的消息是

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

我该如何解决？

Answer 1

SVG 构造函数需要一个节点或一个 id 到放置根 svg 的节点。所以在你的情况下它将是 SVG('drawing')。但是 - 这不能满足您的需求，因为它会创建一个 new svg 文档。您想要采用内联 SVG。为此，请尝试：SVG.get('drawing')。这个 returns 你的 svg.js 实例。现在您可以搜索您的组并在其上调用 panZoom:

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

或者您可以直接搜索：SVG.select('#canvas').get(0).panZoom()。如果你想要 panZoom 整个文档，我想你必须直接在 svgDoc 上调用它，比如：SVG.get('drawing').panZoom()

我还建议使用官方插件 svg.draggable.js 而不是 draggy，因为它处理转换更稳定。

如何select<use>并且可以使用svg.pan-zoom.js进行缩放？

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

javascript

jquery

svg

svg.js