如何在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.
谢谢
编辑
HERE 我发现了有关该问题的一些有用信息.仍然我需要知道如何在加载事件上添加一些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.
推荐答案
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 embed或object标签来嵌入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.
但是，如果您使用第二种方法，并使用对象或embed元素嵌入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脚本元素.
- the HTML embedding context, using an HTML script element using an HTML script element, or
- the SVG embedded context, using an SVG script element inside the SVG document.
如果使用后一种方法，则需要使用旧版本的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文档的文档元素的完整说明，请参见以下答案:
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屋！
