分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在SVG(可缩放矢量图形)中使用jquery？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我在我的PHP 文件中嵌入了SVG来显示地图。我想在其上使用jquery，但我不知道如何链接jquery。我希望有人已经做了这样的事情。所以请帮忙解决这个问题。

谢谢

编辑

HERE我在我的问题上找到了一些有用的信息。仍然需要知道如何添加一些css或链接在加载事件。

解决方法

jquery-svg库专门旨在促进这一点： http://keith-wood.name/svg.html

如果您希望避免使用图书馆，那么您需要考虑几个基本的初步挑战和决策。

首先，您需要指定嵌入SVG的方式。大多数现代浏览器中的SVG可以包含在XHTML“inline”中。第二，更常见的是，您可以使用HTML嵌入或对象标记嵌入SVG文档。

如果您使用第一种方法，则可以使用主机HTML文档中的HTML脚本元素来导入jQuery，然后HTML文档中的脚本应能够轻松地访问内联SVG文档中的元素，并以您将期望。

但是，如果您使用第二种方法，并使用对象或嵌入元素嵌入SVG，那么您还需要做更多的决定。首先，你需要决定是否应该导入jQuery

> HTML嵌入上下文，使用HTML脚本元素使用HTML脚本元素，或
> SVG嵌入式上下文，在SVG文档中使用SVG脚本元素。

如果使用后一种方法，则需要使用较旧版本的jQuery(我认为1.3.2应该可以使用)，因为较新版本使用功能检测功能，这会破坏SVG文档。

更常见的方法是将jQuery导入主机HTML文档，并从嵌入式上下文中检索SVG节点。但是，您需要注意此方法，因为嵌入式SVG文档异步加载，因此需要在对象标签上设置加载侦听器才能检索主机元素。有关如何从HTML检索嵌入式SVG文档的文档元素的完整说明，请参阅此答案：How to access SVG elements with Javascript

一旦您拥有嵌入式SVG文档的根文档元素，那么在嵌入HTML文档中使用jQuery进行查询时，您将需要将其用作上下文节点。例如，您可以执行以下操作(未经测试但应运行)：

<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>