如何在SVG(可缩放矢量图形)中使用jquery?

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

谢谢

编辑

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

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文档的文档元素的完整说明,请参阅以下答案: 如何使用Javascript访问SVG元素

获得嵌入式SVG文档的根文档元素后,当您在嵌入HTML文档中使用jQuery进行查询时,您将需要将其用作上下文节点。 例如,您可以执行以下操作(未经测试,但应该可以):

  SVG Illustrator Test        

SVG使用DOM中的元素即。

  My SVG    

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

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

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