我要实现一个不改变页面以及svg文件的前提下，通过js动态加载svg，动态为svg添加事件，重构右键菜单等功能。
环境是IE+SvgViewer。我的思路是在页面onload时给页面的某个层里动态添加一个<embed id="NavigateControl" name="svg" type="image/svg+xml" src="11.svg" width="100%" height="100%" >标签，然后操作svg文件，所有操作都是在页面onload时进行的。
然后问题就出来了 try {
CurveControl = document.getElementById('NavigateControl'); //NavigateControl就是embed标签的id
if(CurveControl==null)
return;
svgDoc = CurveControl.getSVGDocument(); //到这里就会出错了，提示没有当前方法。
//得到了svgDoc之后我就可以对svg操作了。
}
catch(e) {
alert(e);
}
CurveControl.getSVGDocument()这个方法在<embed id="NavigateControl" name="svg" type="image/svg+xml" src="11.svg" width="100%" height="100%" >标签写死在页面中时就可以成功取得SVGDocument，可是在动态添加的情况下就不好用了，我应该怎么取得SVGDocument呢，或者我的思路不对？
环境是IE+SvgViewer。我的思路是在页面onload时给页面的某个层里动态添加一个<embed id="NavigateControl" name="svg" type="image/svg+xml" src="11.svg" width="100%" height="100%" >标签，然后操作svg文件，所有操作都是在页面onload时进行的。
然后问题就出来了 try {
CurveControl = document.getElementById('NavigateControl'); //NavigateControl就是embed标签的id
if(CurveControl==null)
return;
svgDoc = CurveControl.getSVGDocument(); //到这里就会出错了，提示没有当前方法。
//得到了svgDoc之后我就可以对svg操作了。
}
catch(e) {
alert(e);
}
CurveControl.getSVGDocument()这个方法在<embed id="NavigateControl" name="svg" type="image/svg+xml" src="11.svg" width="100%" height="100%" >标签写死在页面中时就可以成功取得SVGDocument，可是在动态添加的情况下就不好用了，我应该怎么取得SVGDocument呢，或者我的思路不对？
CurveControl.onload = function() {
.....};可能是svg还没load完，所以你取不到
{
try {
CurveControl = document.getElementById('NavigateControl');
if(CurveControl==null)
return;
svgDoc = CurveControl.getSVGDocument();
}
catch(e) {
alert(e);
}
我这样了，仍然不行。
那是本画面，相当于DOMContentLoad，还不如onload呢，你照着我的样子做了吗？
CurveControl.src = '1.svg';貌似不能这样设置src属性。
里面贴的代码我试了，依然是获取不到SVGDocument。
62行的 var svgdoc=getSVGDocument(svg); svgdoc运行时为null。
alert(document.getElementById('NavigateControl').id); //这个可以弹出NavigateControl，没问题
CurveControl=document.getElementById('NavigateControl'); //这也可以取到
CurveControl.onload = function() {
svgDoc = CurveControl.getSVGDocument(); //这里就出问题了，报错，没有该方法，跟我以前错的一样
alert(svgDoc);
};
CurveControl.onload();
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>
<script type="text/javascript">
function load() {
var embedTag = document.createElement('embed');
embedTag.type = "image/svg+xml";
embedTag.width = "640";
embedTag.height = "480";
embedTag.onload = function() {
alert(embedTag.getSVGDocument());
};
embedTag.src = "test.svg";
document.body.appendChild(embedTag);
}
</script>
</head>
<body onload="load();">
</body>
</html><?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" onload="init(evt);">
<script type="text/javascript">
<![CDATA[
function init() {
alert(1);
}
]]>
</script>
<line x1="20" y1="20" x2="70" y2="20" style="stroke:black"/>
</svg>谁说不行！！！！
看来是我写错了 - -，你这个是行。
但我是想给svg里的g标记添加一个onclick事件。
我应该怎么写？
刚才试着写了下，没写出来。这个是我的svg<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="640" height="480" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg">
<g id="g1"></g>
<g id="Value1" >
<rect id="r1" x="100" y="100" width="50" height="30" stroke="black" stroke-width="2" fill="none"/>
<text id="Text1" x="125" y="125" fill="#000000" stroke="none" font-family="Arial" font-size="20" font-weight="bold" text-anchor="middle" >8.67</text>
</g>
<g id="Value2">
<rect id="r2" x="100" y="200" width="50" height="30" stroke="black" stroke-width="2" fill="none"/>
<text id="Text2" x="125" y="225" fill="#000000" stroke="none" font-family="Arial" font-size="20" font-weight="bold" text-anchor="middle" >8.66</text>
</g>
<g id="aValue3">
<rect id="r3" x="100" y="300" width="50" height="30" stroke="black" stroke-width="2" fill="none"/>
<text id="Text3" x="125" y="325" fill="#000000" stroke="none" font-family="Arial" font-size="20" font-weight="bold" text-anchor="middle" >8.65</text>
</g>
<g id="Val3ue">
<rect id="r4" x="100" y="400" width="50" height="30" stroke="black" stroke-width="2" fill="none"/>
<text id="Text4" x="125" y="425" fill="#000000" stroke="none" font-family="Arial" font-size="20" font-weight="bold" text-anchor="middle" >8.64</text>
</g>
</svg>
这个是我写的添加onclick事件的方法。 function setGElementsOnClick() {
var mydoc = svgDoc; //svgDoc是之前取到的，我就是不知道在动态添加的embed里，怎么获取svgDoc
var gElements = mydoc.getElementsByTagName("g");
var length = gElements.length;
for (var i = 0; i < length; i++) {
var id = gElements.item(i).getAttribute("id")
if(0 == id.indexOf("Value")) {
// alert(gId.indexOf("Value"));
gElements.item(i).setAttribute("onclick","alertIdByClick(evt);");
}
}
}
function alertIdByClick(evt) {
if (2 == evt.detail) {
alert(gId);
}
}
貌似你这个的embedTag.getSVGDocument()也不行呢。
原来你的是在FF下可以。我一直都是用IE打开。我已经说了，环境是IE+SvgViewer，我发现应该是IE加载未完成导致获取不到，但怎样才能获取到svgDoc呢
3楼给的链接是讲关于IE的，但我运行他那个，还是不行。。下面方法的svgRoot获取不到。//在Html中创建一个SVG节点，指定id，父亲节点，对于IE创建<embed />，其他浏览器创建<SVG />
function createSVG(id,parent){
var svg;
if(isIE){
svg=document.createElement("embed");
svg.setAttribute("id",id);
svg.setAttribute("type",'image/svg+xml');
svg.setAttribute("src",emptySVGSrc);
}else {
svg=document.createElementNS(twConstants.NS_SVG,'svg');
}
svg.setAttribute("width",'100%');
svg.setAttribute("height",'100%');
parent.appendChild(svg);
if(isIE){
doLater(
function(svg){
var svgdoc=getSVGDocument(svg);
var svgRoot=getSVGRoot(svg,svgdoc); //运行时，svgRoot为空。
svgRoot.setAttribute("height",'100%');
svgRoot.setAttribute("width",'100%');
},100,svg);
}
return svg;
}
求解决方案
for (var i = 0; i < length; i++) {
var id = gElements.item(i).getAttribute("id")
if(0 == id.indexOf("Value")) {
// alert(gId.indexOf("Value"));
gElements.item(i).onclick = alertIdByClick;//即可
}
}
# //画图
# IE：VML。
# FF：SVG。
ie没有svg用vml即可
http://blog.csdn.net/IBM_hoojo/archive/2010/07/02/5708440.aspx
公司让用svg，而且说是只针对IE用户，所以没办法只能IE+SvgViewer了。
我存在的问题其实就是3楼描述的那样，在IE里使用javascript动态创建SVG对象的问题。但是那里说的方法确实还是有错误，就像我13楼说的那样，也许因为我菜，没能弄明白真正的原理吧。希望能有解决办法。
<head>
<title>By Mr.Ms</title>
</head>
<body onload="load();"> //onload获取svgDoc，操作svg
<div id="mainDiv"></div>
</body>
<script type="text/javascript">
//这里调用动态添加embed的方法
</script>
</html>
[/code]这样肯定会在svg加载完成之后才操作，因为调用的javascript方法在onload之前。
<html>
<head>
<title>By Mr.Ms</title>
</head>
<body onload="load();"> //onload获取svgDoc，操作svg
<div id="mainDiv"></div>
</body>
<script type="text/javascript">
//这里调用动态添加embed的方法
</script>
</html>
这样肯定会在svg加载完成之后才操作，因为调用的javascript方法在onload之前。
推荐楼主参考 google的closure library
相当精彩