如何在 SVG(可缩放矢量图形)中使用 jquery? [英] How to use jquery in SVG (Scalable Vector Graphics)?
问题描述
我在我的 php 文件中嵌入了 SVG 来显示地图.我想在它上面使用 jquery，但我不知道如何在其中链接 jquery.我希望有人已经做过这样的事情.所以请帮助解决这个问题.
I have embedded SVG in my php file to show a map. I want to use jquery on It but I have no idea on how to link jquery in it. I hope someone has already done such thing. So please help on this issue.
谢谢
编辑
这里 我发现了一些关于我的问题的有用信息.我仍然需要知道如何在加载事件中添加一些 css 或链接.
HERE I found some useful info on my question. still i need to know how to add some css or link on load event.
推荐答案
jquery-svg 库专门为此提供便利:http://keith-wood.name/svg.html
The jquery-svg library specifically aims to facilitate this: http://keith-wood.name/svg.html
如果您希望避免使用库，那么您需要考虑一些基本的初始挑战和决定.
If you wish to avoid using a library, then there are a few basic initial challenges and decisions which you need to consider.
首先，您需要指定嵌入 SVG 的方式.在大多数现代浏览器中，SVG 可以包含在 XHTML内联"中.其次，更常见的是，您可以使用 HTML 嵌入或对象标记来嵌入 SVG 文档.
First, you need to specify how you're embedding the SVG. SVG can be included in XHTML "inline" in most modern browsers. Second, and more commonly, you can embed the SVG document using an HTML embed or object tag.
如果你使用第一种方法，那么你可以使用宿主 HTML 文档中的 HTML 脚本元素来导入 jQuery，然后你的 HTML 文档中的脚本应该能够轻松访问内联 SVG 文档中的元素，并且在你所期望的方式.
If you use the first approach, then you can use an HTML script element in the host HTML document to import jQuery, and then your scripts in the HTML document should be able to access elements in the inline SVG document easily and in the way you would expect.
但是，如果您使用第二种方法，并使用对象或嵌入元素嵌入 SVG，那么您需要做出更多决定.首先需要决定是否应该将jQuery导入
If, however, you're using the second approach, and embedding the SVG using an object or embed element, then you have a few more decisions to make. First, you need to decide whether the jQuery should be imported into
- HTML 嵌入上下文，使用 HTML 脚本元素使用 HTML 脚本元素，或
- SVG 嵌入上下文，使用 SVG 文档内的 SVG 脚本元素.
如果您使用后一种方法，那么您将需要使用旧版本的 jQuery(我认为 1.3.2 应该可以使用)，因为新版本使用特征检测，这会破坏 SVG 文档.
If you use the latter approach, then you'll need to use an older version of jQuery (I think 1.3.2 should work), as the newer versions use feature detection, which breaks on SVG documents.
更常见的方法是将 jQuery 导入宿主 HTML 文档，并从嵌入的上下文中检索 SVG 节点.但是，您需要小心使用这种方法，因为嵌入的 SVG 文档是异步加载的，因此需要在对象标记上设置一个 onload 侦听器以检索宿主元素.有关如何从 HTML 检索嵌入的 SVG 文档的文档元素的完整说明，请参阅此答案:如何使用 Javascript 访问 SVG 元素
The more common approach is to import jQuery into the host HTML document, and retrieve the SVG node from the embedded context. You need to be careful with this approach, however, because the embedded SVG document loads asynchronously, and so an onload listener needs to be set on the object tag in order to retrieve the host element. For a complete description of how to retrieve the document element of the embedded SVG document from HTML, see this answer: How to access SVG elements with Javascript
一旦您拥有嵌入的 SVG 文档的根 documentElement，那么当您在嵌入的 HTML 文档中使用 jQuery 进行查询时，您将需要将其用作上下文节点.例如，您可以执行以下操作(未经测试，但应该可以):
Once you have the root documentElement of the embedded SVG document, then you'll need use it as a context node when you make queries with jQuery in the embedding HTML document. For example, you could do the following (untested, but should work):
<html>
<head>
<title>SVG Illustrator Test</title>
<script src="jQuery.js"></script>
<script>
$(document).ready(function(){
var a = document.getElementById("alphasvg");
//it's important to add an load event listener to the object, as it will load the svg doc asynchronously
a.addEventListener("load",function(){
var svgDoc = a.contentDocument; //get the inner DOM of alpha.svg
var svgRoot = svgDoc.documentElement;
//now we can query stuff with jquery like this
//note that we pass in the svgRoot as the context node!
$("foo bar",svgRoot);
},false);
})
</script>
</head>
<body>
<object data="alpha.svg" type="image/svg+xml" id="alphasvg" width="100%" height="100%"></object>
</body>
</html>
这篇关于如何在 SVG(可缩放矢量图形)中使用 jquery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
