当使用svg-pan-zoom时，可以加载svg代码而不是加载文件吗？

Question

我正在使用svg-pan-zoom加载我的svg上的放大和缩小功能。 但是我的svg没有存储在一个文件中，它是通过js生成的。

我想添加一个thumbnailViewer，根据他们的榜样，他们把SVG的嵌入标记像这里面：

<embed id="thumbView" type="image/svg+xml" src="tiger.svg" class="thumbViewClass"/> 

但我的SVG是不是一个静态的文件，我该怎么解决？任何想法？谢谢。

http://ariutta.github.io/svg-pan-zoom/demo/thumbnailViewer.html

Answer 1

对于完整的答案检查相同issue on GitHub。

基本上你将不得不创建2个类似的SVG（并行更新它们），因为这就是插件的工作原理。除此之外，您应该像使用任何其他内联SVG一样使用该插件（有许多内联SVG的示例）。

Answer 2

是的！您可以在此处使用内联SVG：http://ariutta.github.io/svg-pan-zoom/demo/inline.html

<svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" width="100%" height="500px" viewBox="0 0 2049 1393"> 

var panZoom = svgPanZoom('#demo-tiger', { 
    viewportSelector: viewportGroupElement 
});