日期:2014-05-16  浏览次数:20305 次

使用javascript动态创建SVG对象的问题
如何在html中操作SVG对象的问题,对于嵌入式<embed name="id1" id='svgId' type='image/svg+xml' src="./test.svg" height="200" width="500"></embed>的可以通过document.getElementById('svgId'). getSVGDocument();的方法得到SVG Doc对象,但此方法存在两个问题:一是opera不支持getSVGDocument方法,二是对于动态创建的embed对象并不会马上被呈现,从而无法立刻得到SVGDocument对象,下面的方法会出错
        var body=document.getElementsByTagName('body')[0];
        var svg=document.createElement("embed");
        svg.setAttribute("id",id);
        svg.setAttribute("type",'image/svg+xml');
        svg.setAttribute("width",'100%');
        svg.setAttribute("height",'100%');
        svg.setAttribute("src",'a.svg');//这里必须输入svg源
        body.appendChild(svg);
        var svgdoc=svg.getSVGDocument();//在IE下出错,原因可能是svg虽然被加到了body中,但需要Adobe的SVG插件去绘制,所以不能立刻得到SVGDocument
embed嵌入还存在一个问题,需要存在一个如下的空SVG文件
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

现在的解决方法是对与IE还是使用embed的方式(最好的是VML),对于其他浏览器,SVG标签和其他标签一样创建,使用下面的方法创建了一个SVG 对象和一个矩形,并添加到body标签下
        var svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
        svg.setAttribute("height",'100%');
        svg.setAttribute("width",'100%');
        var rect=document.createElementNS('http://www.w3.org/2000/svg','rect');
        rect.setAttribute("id","rect");
        rect.setAttribute("x",0);
        rect.setAttribute("y",0);
        rect.setAttribute("width",200);
        rect.setAttribute("height",200);
        rect.setAttribute("fill",'red');
        svg.appendChild(rect);
        var body=document.getElementsByTagName('body')[0];
        body.appendChild(svg);
对于IE的解决办法现在是放在setTimeout()中执行,最佳方案是VML

//emptySVG.svg
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
//svg.html
<html>
<head>
<title>test</title>
<script language=javascript >
var twConstants=
{
DIALECT_SVG:'svg',
DIALECT_VML:'vml',
NS_SVG:'http://www.w3.org/2000/svg',
NS_XLINK:'http://www.w3.org/1999/xlink'
}
var isIE=false;
function checkBrowser(){
    return navigator.appName == "Microsoft Internet Explorer";      
}
isIE=checkBrowser();
function getSVGDocument(svg){
    var result=null;
    if(isIE){
        if(svg.tagName.toLowerCase()=="embed"){
            try{
                result=svg.getSVGDocument();
            }catch(e){
                alert(e+" may be svg embed not init");
            }