我在我的php文件中嵌入了SVG来显示地图.我想在它上使用jquery但我不知道如何在其中链接jquery.我希望有人已经做过这样的事情.所以请帮助解决这个问题.
谢谢
编辑
在这里,我在我的问题上找到了一些有用的信息.我仍然需要知道如何在load事件上添加一些css或链接.
jbe*_*rd4 43
jquery-svg库专门用于促进这一点:http://keith-wood.name/svg.html
如果您希望避免使用库,那么您需要考虑一些基本的初始挑战和决策.
首先,您需要指定嵌入SVG的方式.在大多数现代浏览器中,SVG可以包含在XHTML"内联"中.其次,您可以使用HTML嵌入或对象标记嵌入SVG文档.
如果您使用第一种方法,那么您可以使用主机HTML文档中的HTML脚本元素来导入jQuery,然后HTML文档中的脚本应该能够轻松地以您自己的方式访问内联SVG文档中的元素期望.
但是,如果您正在使用第二种方法,并使用对象或嵌入元素嵌入SVG,那么您还需要做出更多决策.首先,您需要决定是否应该导入jQuery
如果你使用后一种方法,那么你需要使用旧版本的jQuery(我认为1.3.2应该可以工作),因为较新的版本使用特征检测,它打破了SVG文档.
更常见的方法是将jQuery导入主机HTML文档,并从嵌入的上下文中检索SVG节点.但是,您需要小心这种方法,因为嵌入式SVG文档是异步加载的,因此需要在object标记上设置onload侦听器以便检索host元素.有关如何从HTML检索嵌入式SVG文档的文档元素的完整说明,请参阅以下答案:如何使用Javascript访问SVG元素
获得嵌入式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>
And*_*rew 11
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.