當使用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 
});