如何为 raphael 添加 SVGPan 支持
我正在使用一个使用 raphael 库创建 svg 内容的库。我现在想添加缩放功能。我找到了以下库：
http:// /www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/
这就是svg 部分看起来：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
//...the image
问题是该库需要围绕整个图像的 script 标签和 ag 标签。操作后它应该看起来像这样：
<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>
我需要添加脚本标签，但真正的问题是将 id="viewport" 的 ag 元素放在图像的整个其余部分周围。 我如何使用 JQuery 或计划 JavaScript 来做到这一点？
编辑：
我有点超前了。事实证明，添加脚本标签似乎不起作用：
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);
我没有收到错误，并且脚本完全运行，但未添加标签。我已经验证 $('svg') 选择了所需的元素，我可以用它做一些事情，除了为我不理解的任何原因添加脚本标记。
i'm using a library that creates svg content using raphael library. I would now like to add zooming functionality. I found following library:
http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/
This is how the svg part looks:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
//...the image
The issue is that this library expects a script tag and a g tag surrounding the whole image. It should look like this after manipulation:
<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>
I would need to add the script tag but the real problem is to put a g element with id="viewport" around the whole rest of the image.
How can i do that with JQuery or plan JavaScript?
EDIT:
I got a bit ahead of myself. It turns out that adding the script tag does not seem to work:
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);
I don't get an error and the script runs completely but the tag is not added. I have verified that $('svg') selects the desired element and I can do stuff with it except prepending the script tag for whatever resaon i do not understand.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为 Raphael 不允许您操作 SVG 元素，但您可以尝试类似的 Raphael 特定库。这可能会提供您正在寻找的内容：https://github.com/semiaddict/raphael-zpd
编辑：实际上可以操作 SVG 元素：Raphael 公开了 Node 属性。因此，如果您能找到拉斐尔纸质物体，您可以尝试以下操作：
I don't think Raphael allows you to manipulate the SVG element but you could try a similar Raphael-specific library. This one may provide what you are looking for: https://github.com/semiaddict/raphael-zpd
Edit: Actually it is possible to manipulate SVG elements: Raphael exposes a Node property. So if you could get hold of the Raphael paper object you could try something like:
感谢 Clafou 向我指出 raphael-zpd。这引导我找到解决方案。
问题是我能够获取 raphael 对象，但 zpd 仅在尚未绘制任何内容的情况下才起作用，但事实并非如此。
我正在使用 http://www.jsphylosvg.com 它利用了 raphael。解决方案是直接编辑 javascript 文件 jsphylosvg.js：
完成。有用！
（当然你需要在你的网页中引用raphael-zpd）
Thanks Clafou for pointing me to raphael-zpd. This lead me to the solution.
The issue is that I was able to get the raphael object but zpd only works if nothing has been drawn yet which is not the case.
I'm using http://www.jsphylosvg.com which makes use of raphael. The solution is to edit the javascript file jsphylosvg.js directly:
done. It works!
(Of course you need to have a reference to raphael-zpd in your web page)
您是否尝试过通过 jQuery 选择器获取它？例如，您可以尝试通过执行以下操作在子 g 元素上设置 id（在您的库构建了 SVG 元素之后）：
Have you tried getting it via a jQuery selector? You could for example try setting the id on the child g element by doing this (after your library has constructed the SVG element):