使用javascript动态创建SVG对象的问题

2009/8/15
使用javascript动态创建SVG对象的问题

    无沙备忘录系列
    -平时的一些研究,有时也会颇费功夫,然后尘封在邮件发送箱中,实在可惜,现在借助live space 的 E-mail publishing功能,翻出来,吹去灰尘,晒在网上,与众同仁分享,也为自己备份-09.8.15 中午,Sam


2007-9-24 16:34

前面遇到如何在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");
            }
        }
    }else{
        result=svg.ownerDocument;
    }
    return result;
}
function getSVGRoot(svg,doc){
    if(svg.tagName.toLowerCase()=="embed"){
        if(doc){
            return doc.documentElement;
        }else{
            return getSVGDocument(svg).documentElement;
        }
    }else if(svg.tagName.toLowerCase()=="svg"){
        return svg;
    }return null;
}
//空SVG文件路径
var emptySVGSrc="./twaver/emptySVG.svg";
//在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.setAttribute("height",'100%');
                svgRoot.setAttribute("width",'100%');
            },100,svg);
    }
    return svg;
}
//得到SVGDocument
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");
            }
        }
    }else{
        result=svg.ownerDocument;
    }
    return result;
}
//得到SVG根结点
function getSVGRoot(svg,doc){
    if(svg.tagName.toLowerCase()=="embed"){
        if(doc){
            return doc.documentElement;
        }else{
            return getSVGDocument(svg).documentElement;
        }
    }else if(svg.tagName.toLowerCase()=="svg"){
        return svg;
    }return null;
}
//扩展setTimeout方法,实现延时执行
function doLater(callback,timeout,param)
{
    var args = Array.prototype.slice.call(arguments,2);
    var _cb = function()
    {
        callback.apply(null,args);
    }
    setTimeout(_cb,timeout);
}

//______测试代码_______
var svg;
var addRect=function(svg){
    var svgdoc=getSVGDocument(svg);
    var svgRoot=getSVGRoot(svg);
    var rect=svgdoc.createElementNS(twConstants.NS_SVG,'rect');
    rect.setAttribute("id","rect2");
    rect.setAttribute("x",10);
    rect.setAttribute("y",10);
    rect.setAttribute("width",200);
    rect.setAttribute("height",200);
    rect.setAttribute("fill",'red');
    svgRoot.appendChild(rect);
}
function call(){
    var body=document.getElementsByTagName('body')[0];
    svg=createSVG('svgid',body);
    /**
    //如果创建SVG对象后马上添加SVGElement,对于IE需要延时执行
    if(isIE){
        doLater(function(svg){
            addRect(svg);
        },100,svg);
    }else{
        addRect(svg);
    }
    **/
}
function showmsg()
{
    //这里不需要延时执行,因为这里是在按钮点击事件中,SVG已经初始化
    addRect(svg);
}
</script>
</head>
<body onload='call()'>
<input type='button' onclick='{showmsg();}' value='ok' />
</body>
</html>

相关问题

评论

写下你的理解