使用javascript动态创建SVG对象的问题
MegatronKings 2011-04-23
如何在html中操作SVG对象的问题，对于嵌入式<embedname="id1"id='svgId'type='image/svg+xml'src="./test.svg"height="200"width="500"></embed>的可以通过document.getElementById('svgId').getSVGDocument();的方法得到SVGDoc对象，但此方法存在两个问题：一是opera不支持getSVGDocument方法，二是对于动态创建的embed对象并不会马上被呈现，从而无法立刻得到SVGDocument对象，下面的方法会出错
varbody=document.getElementsByTagName('body')[0];
varsvg=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);
varsvgdoc=svg.getSVGDocument();//在IE下出错，原因可能是svg虽然被加到了body中，但需要Adobe的SVG插件去绘制，所以不能立刻得到SVGDocument
embed嵌入还存在一个问题，需要存在一个如下的空SVG文件
<svgxmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
现在的解决方法是对与IE还是使用embed的方式(最好的是VML)，对于其他浏览器，SVG标签和其他标签一样创建，使用下面的方法创建了一个SVG对象和一个矩形，并添加到body标签下
varsvg=document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttribute("height",'100%');
svg.setAttribute("width",'100%');
varrect=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);
varbody=document.getElementsByTagName('body')[0];
body.appendChild(svg);
对于IE的解决办法现在是放在setTimeout()中执行，最佳方案是VML
//emptySVG.svg
<svgwidth="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>
<scriptlanguage=javascript>
vartwConstants=
{
DIALECT_SVG:'svg',
DIALECT_VML:'vml',
NS_SVG:'http://www.w3.org/2000/svg',
NS_XLINK:'http://www.w3.org/1999/xlink'
}
varisIE=false;
functioncheckBrowser(){
returnnavigator.appName=="MicrosoftInternetExplorer";
}
isIE=checkBrowser();
functiongetSVGDocument(svg){
varresult=null;
if(isIE){
if(svg.tagName.toLowerCase()=="embed"){
try{
result=svg.getSVGDocument();
}catch(e){
alert(e+"maybesvgembednotinit");
}
}
}else{
result=svg.ownerDocument;
}
returnresult;
}
functiongetSVGRoot(svg,doc){
if(svg.tagName.toLowerCase()=="embed"){
if(doc){
returndoc.documentElement;
}else{
returngetSVGDocument(svg).documentElement;
}
}elseif(svg.tagName.toLowerCase()=="svg"){
returnsvg;
}returnnull;
}
//空SVG文件路径
varemptySVGsrc="./twaver/emptySVG.svg";
//在Html中创建一个SVG节点，指定id，父亲节点，对于IE创建<embed/>，其他浏览器创建<SVG/>
functioncreateSVG(id,parent){
varsvg;
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){
varsvgdoc=getSVGDocument(svg);
varsvgRoot=getSVGRoot(svg,svgdoc);
svgRoot.setAttribute("height",'100%');
svgRoot.setAttribute("width",'100%');
},100,svg);
}
returnsvg;
}
//得到SVGDocument
functiongetSVGDocument(svg){
varresult=null;
if(isIE){
if(svg.tagName.toLowerCase()=="embed"){
try{
result=svg.getSVGDocument();
}catch(e){
alert(e+"maybesvgembednotinit");
}
}
}else{
result=svg.ownerDocument;
}
returnresult;
}
//得到SVG根结点
functiongetSVGRoot(svg,doc){
if(svg.tagName.toLowerCase()=="embed"){
if(doc){
returndoc.documentElement;
}else{
returngetSVGDocument(svg).documentElement;
}
}elseif(svg.tagName.toLowerCase()=="svg"){
returnsvg;
}returnnull;
}
//扩展setTimeout方法，实现延时执行
functiondoLater(callback,timeout,param)
{
varargs=Array.prototype.slice.call(arguments,2);
var_cb=function()
{
callback.apply(null,args);
}
setTimeout(_cb,timeout);
}
//______测试代码_______
varsvg;
varaddRect=function(svg){
varsvgdoc=getSVGDocument(svg);
varsvgRoot=getSVGRoot(svg);
varrect=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);
}
functioncall(){
varbody=document.getElementsByTagName('body')[0];
svg=createSVG('svgid',body);
/**
//如果创建SVG对象后马上添加SVGElement，对于IE需要延时执行
if(isIE){
doLater(function(svg){
addRect(svg);
},100,svg);
}else{
addRect(svg);
}
**/
}
functionshowmsg()
{
//这里不需要延时执行，因为这里是在按钮点击事件中，SVG已经初始化
addRect(svg);
}
</script>
</head>
<bodyonload='call()'>
<inputtype='button'onclick='{showmsg();}'value='ok'/>
</body>
</html>
SVG支持用<path>标签用来定义图形的路径
