javascript - svg图像缩放、平移和编辑

Question

我有一个 svg 图像。我想在鼠标滚动时缩放并拖动图像。当它是图像时，我可以拖动和缩放它。但我希望 svg 图像位于对象中以供进一步编辑。

<div id="pcontainer1" class="pancontainer">  <img src="abc.svg" id="abc_svg" data="abc.svg"  width="900"  type="image/svg+xml" height="900"/>  </div>

我使用了以下脚本: -jquery.kinetic.min.js - jquery.mousewheel.min.js - imagepanner.js

缩放 abc.svg。它运行良好。但是如果我将它作为这样的对象放置:

<div id="pcontainer1" class="pancontainer"> <object id="abc_svg" data="Corp_BluePrint_FACT_Accounting_updated.svg"  width="900" height="900" type="image/svg+xml"> </object></div>

当我将其作为上面的对象放置时，缩放和平移不起作用

Answer 1

svg-pan-zoom似乎对你来说是一个不错的选择。它是 HTML 中 SVG 的简单平移/缩放解决方案。我已经在许多项目中使用过这个库，它就像一个魅力。

看看这个简单的 demo ⁴⁰⁴ 并在他们的 GitHub 页面上了解更多信息。