jbe*_*ach 5 svg ipython jupyter
我想在 jupyter 单元中嵌入外部 .svg，然后能够平移和缩放。具体来说，我想使用很棒的svg-pan-zoom库。考虑到类似的扩展，例如传单和地图框，这似乎是可能的。
只是尝试 svg-pan-zoom 中的示例，给出以下内容：
%%HTML
<html>
<body>
<h1>Demo for svg-pan-zoom: SVG in HTML 'object' element</h1>
<object id="demo-tiger" type="image/svg+xml" data="https://cdn.rawgit.com/ariutta/svg-pan-zoom/master/demo/tiger.svg" style="width: 500px; height: 500px; border:1px solid black; ">Your browser does not support SVG</object>
<script>
require.config({
paths: {
panzoom: '//cdn.rawgit.com/ariutta/svg-pan-zoom/master/dist/svg-pan-zoom'
}
});
require(['panzoom'], function(panzoom) {
console.log("Loaded :)");
var s = document.getElementById('demo-tiger')
s.onload = function(panzoom){
console.log('loaded')
panzoom.svgPanZoom('#demo-tiger', {
zoomEnabled: true,
controlIconsEnabled: true
});
}
});
</script>
</body>
</html>
单元格渲染图像，但从不渲染平移缩放功能。经过许多不同的方法后，它仍然无法将 识别svgPanZoom为函数。
我也试过在/nbextensions目录中加载它。这也不起作用。
我对 JS 或 DOM 没有经验，所以任何建议都值得赞赏。
小智 -1
此线程中有一个在笔记本中使用平移缩放的工作示例：
%%html
<body>
<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<div id="container" style="width: 500px; height: 300px; border:1px solid black; ">
<svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit; " viewBox="0 0 900 900">
<circle cx="50" cy="50" r="50" />
</svg>
</div>
<button id="enable">enable</button>
<button id="disable">disable</button>
<script>
// Don't use window.onLoad like this in production, because it can only listen to one function.
window.onload = function() {
// Expose to window namespase for testing purposes
window.zoomTiger = svgPanZoom('#demo-tiger', {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
// viewportSelector: document.getElementById('demo-tiger').querySelector('#g4') // this option will make library to misbehave. Viewport should have no transform attribute
});
document.getElementById('enable').addEventListener('click', function() {
window.zoomTiger.enableControlIcons();
})
document.getElementById('disable').addEventListener('click', function() {
window.zoomTiger.disableControlIcons();
})
};
</script>
</body>