Question

我使用svg.js和svg.pan-zoom.js来使svg可以使用scroll进行缩放。比如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，但我不知道如何修复它。

控制台中的消息是

svgPanzoom.js：129未捕获的TypeError：无法读取未定义的属性'tagName'

我该如何解决？

Answer 1

SVG构造函数需要一个节点或id到放置根svg的节点。所以在你的情况下它将是SVG('drawing')。但是 - 这不能满足您的需求，因为它会创建一个 new svg文档。您想采用内联SVG。为此，请尝试：SVG.get('drawing')。这将返回您的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而不是拖拉，因为它可以更稳定地处理转换。

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

1 个答案: