Javascript 如何向raphael添加SVGPan支持

我使用的库使用raphael库创建svg内容。我现在想添加缩放功能。我发现了以下库：

以下是svg部分的外观：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
//...the image

---

我没有收到错误，脚本完全运行，但没有添加标记。我已经验证了$（'svg'）选择了所需的元素，我可以用它做一些事情，除了为我不理解的任何reson预先添加脚本标记。

我认为Raphael不允许您操作svg元素，但您可以尝试类似的Raphael特定库。这一个可能会提供您想要的：

编辑：实际上可以操作SVG元素：Raphael公开了一个节点属性。因此，如果你能抓住拉斐尔的纸制品，你可以尝试以下方法：

paper.node.setAttribute（“id”、“视口”）

---

您是否尝试过通过jQuery选择器获取它？例如，您可以尝试通过这样做（在您的库构建SVG元素之后）在子g元素上设置id：

$（'svg>g'）.attr（'id'，'viewport'）

---

谢谢克拉福给我指点拉斐尔zpd。这使我找到了解决办法。 问题是，我能够得到拉斐尔的对象，但zpd只有在没有画的情况下才起作用，事实并非如此

我用的是拉斐尔。解决方案是直接编辑javascript文件jsphylosvg.js：

搜索this.svg=Raphael（sDivId，this.canvasSize[0]，this.canvasSize[1]）；（就我而言，第1217行）

add:this.svg.ZPD（{zoom:true，pan:true，drag:true}）；就在这条线的正下方

保存jsp.svg.js

完成了。它起作用了！

---

（当然你需要在你的网页上有对raphael zpd的引用）

更具体地说，我使用的是一个内部使用raphael的库。我还没有弄清楚如何让基础raphael paper对象能够像zpd插件那样操作它。它不是

paper.node

，而是

paper.canvas

，而是让g元素围绕所有东西。它根本不在那里！请参见我问题中的编辑。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<script xlink:href="SVGPan.js"/>
<g id="viewport" transform="translate(200,200)">
...//the image
</g>

var svg = $('svg'); 
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); // else error in firefox with links
var scriptElement = document.createElementNS('http://www.w3.org/2000/svg','script');
scriptElement.setAttribute('xlink:href','js/SVGPan.js');
svg.prepend(scriptElement);