SVG文件
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id='frame'></g>
</svg>HTML文件
<html>
<head>
<title>SVG</title>
<script language="javascript">
function t1(){
var svgDocument = document.getElementById('svg').getSVGDocument();
var frame = svgDocument.getElementById('frame');
var rect1 = svgDocument.createElement('rect');
rect1.setAttribute('x', 40);
rect1.setAttribute('y', 40);
rect1.setAttribute('width', 40);
rect1.setAttribute('height', 40);
rect1.setAttribute('style', 'fill:rgb(238,238,238);stroke:none;');
frame.appendChild(rect1);
}
</script>
</head>
<body onload='t1()'>
<embed id='svg' src="polyline.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>上面的代码在IE中工作正常,FireFox中却没有显示,不知道问题出在哪里

解决方案 »

  1.   

    不会把,FF天生就支持SVG的,到是IE需要插件才能显示SVG文件
      

  2.   

    嘿嘿,搞错,是不支持vml不同版本的ff对svg的支持不一样
      

  3.   

    为了保证svg浏览器的兼容性,不推荐使用createElement,改为createElemmentNS,如下
    var rect1 = svgDocument.createElementNS('http://www.w3.org/2000/svg','rect');
    rect1.setAttribute('x', 40);
    rect1.setAttribute('y', 40);
    rect1.setAttribute('width', 40);
    rect1.setAttribute('height', 40);
    rect1.setAttribute('style', 'fill:rgb(238,238,238);stroke:none;');
    frame.appendChild(rect1);我这边IE,ff,chrome都测试通过了