Я использую скрипт от ariutta
Демо от ariutta
Скрипт от ariutta
Предоставленная онлайн демо просто работает нормально, но всякий раз, когда я пытаюсь реализовать его в своем локальном тесте, он не работает. Я подумал, что это может быть связано с большим размером файла SVG, поэтому я добавил кнопку для инициализации элементов управления масштабированием и панорамированием. Когда я нажимаю кнопку, появляются журналы.
Я собрал все разные журналы ошибок браузера:
Chrome 79.0.3945.130:
Uncaught DOMException: Failed to execute 'queryCommandSupported' on 'Document': queryCommandSupported is only supported on HTML documents.
at chrome-extension://fbcohnmimjicjdomonkcbcpbpnhggkip/contentscripts/toolbarContentscript.js:5:42
adult-content.js:66 Uncaught (in promise) TypeError: Cannot read property 'addEventListener' of null
at apologizeHangers (adult-content.js:66)
at adult-content.js:111
at Array.forEach (<anonymous>)
at adult-content.js:110
svg-pan-zoom.min.js:3 Uncaught TypeError: Cannot read property 'documentElement' of null
at Object.getSvg (svg-pan-zoom.min.js:3)
at p (svg-pan-zoom.min.js:3)
at enablePANandZOOM (embed.html:16)
at HTMLButtonElement.onclick (embed.html:10)
Microsoft Edge 44.17763. 831.0
0: Zugriff verweigert(access denied translated) svg-pan-zoom.min.js (2,28301)
IE11 11.973.17763.0
SCRIPT5: Zugriff verweigert(access denied translated)
svg-pan-zoom.min.js (3,28302)
Firefox 72.0.1 (64-разрядная версия)
TypeError: e.getSVGDocument(...) is nullsvg-pan-zoom.min.js:3:28306
getSvg http://georodin.de/svg-pan-zoom.min.js:3
p http://georodin.de/svg-pan-zoom.min.js:3
enablePANandZOOM file:///C:/Users/***/Desktop/SpaceCitizen2D/embed.html:16
onclick file:///C:/Users/***/Desktop/SpaceCitizen2D/embed.html:1
Это содержимое embed.html
<!DOCTYPE html>
<html>
<head>
<script src="http://georodin.de/svg-pan-zoom.min.js"></script>
</head>
<body>
<h1>Demo for svg-pan-zoom: SVG in HTML 'embed' element</h1>
<button onclick="enablePANandZOOM()">Enable Zoom</button>
<embed id="demo-tiger" type="image/svg+xml" style="width: 500px; height: 500px; border:1px solid black; " src="http://georodin.de/background_1.svg" />
<script>
function enablePANandZOOM() {
svgPanZoom('#demo-tiger', {
zoomEnabled: true,
controlIconsEnabled: true
});
};
</script>
</body>
</html>
SVG отображается правильно, но элементы управления не отображаются. Также я не могу панорамировать SVG, как в предоставленной демонстрации.