分享程序员开发的那些事...
更新时间：2023-01-18 13:24:49
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
如果使用后一种方法，则需要使用旧版本的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>