Question

我想让访问者使用点击并拖动来缩放图片：

<html>
    <body>
        <svg>
            <image>

是否有一个可以帮助我的JavaScript库？

我注意到Raphael has click and drag方法，但我仍然需要编写很多JS来：

我能做到这一切，但听起来很费时间。我应该使用一个开源脚本吗？其他建议？

Answer 1

我在这篇文章中找到了这个解决方案： Draggables and Resizables in SVG。

在答案中，您可以找到一个jsfiddle链接：http://jsfiddle.net/tmkfs/。您可以通过单击并拖动框的角来调整框的大小。希望这段代码可以帮到你。

Answer 2

不是我知道的。我需要做同样的事情，我很惊讶我还没有找到插件甚至是如何用Rahpeal.js做这个的例子。因为这似乎是很多人想要用SVG或Rapheal.js做的事情，我很惊讶没有内置的方法来做它（我会想到scale + drag会做到这一点，但它不是就像它看起来那么容易。）

我需要这个功能所以我自己一直在构建它。我遇到了一个小障碍（在此记录：Raphael.js drag with scale causes weird jumping behavior），但它刚刚起作用。一旦我完成了，如果你愿意，我可以在jsfiddle或github上发布我的解决方案。

Answer 3

你应该看看SvgKit它提供了很好的库来操作 - 生成svg包括使用javascript进行事件处理。

来自官方文件：

添加SVGKit对象以进行事件处理。在SVG它可以从鼠标坐标到本地坐标很棘手。 SVGEvent 有例程来启用可拖动项目，可旋转项目和防止平移和缩放项目。

活动演示is here。