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

ayue222

浏览: 49485 次
性别:
来自: 北京

最近访客更多访客>>

zuzutang2

zcm1205

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript IE 嵌入式浏览器 Opera

如何在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>
SVG支持用<path> 标签用来定义图形的路径

分享到：

YUI3 事件

2011-04-24 01:04
浏览 2245
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论