Можно ли загрузить svg-код вместо загрузки файла при использовании svg-pan-zoom?

Question

Я использую svg-pan-zoom загрузить добавить увеличение и уменьшение масштаба на моем SVG. Но мой svg не хранится в файле, он генерируется через js.

Я хотел бы добавить thumbnailViewer, в соответствии с их примером, они помещают svg внутри тега embed следующим образом:

  <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

Для полного ответа проверьте ту же проблему на 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
});