Question

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

谢谢

修改

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

Answer 1

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

如果您希望避免使用库，那么您需要考虑一些基本的初始挑战和决策。

首先，您需要指定嵌入SVG的方式。在大多数现代浏览器中，SVG可以包含在XHTML“内联”中。其次，您可以使用HTML嵌入或对象标记嵌入SVG文档。

如果您使用第一种方法，那么您可以使用主机HTML文档中的HTML脚本元素来导入jQuery，然后HTML文档中的脚本应该能够轻松地访问内联SVG文档中的元素。你会期待的方式。

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

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

如果您使用后一种方法，那么您将需要使用旧版本的jQuery（我认为1.3.2应该可以使用），因为较新的版本使用特征检测，这会破坏SVG文档。

更常见的方法是将jQuery导入主机HTML文档，并从嵌入式上下文中检索SVG节点。但是，您需要小心这种方法，因为嵌入式SVG文档是异步加载的，因此需要在object标记上设置onload侦听器以便检索host元素。有关如何从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>

Answer 2

SVG使用DOM中的元素，即

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600">
    <desc>My SVG</desc>
    <defs>
       <path fill="#ffffff" stroke="#ffffff" d="M100,100L100,100Z" style="fill-opacity:
        0.3; stroke-width: 1; stroke-linecap: round;" fill-opacity="0.3" 
        stroke-width="1" stroke-linecap="round">
</svg>

访问它并操纵它可以像jQuery操纵DOM中的任何其他Object一样完成。即

$('svg path').remove(); //removes the path.

如果您正在寻找一个javascript库来操作SVG元素，请查看 Raphael.js

如何在SVG（可缩放矢量图形）中使用jquery？

2 个答案: