锐客网

  1. 首页 > it技术 > >

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

javascript嵌入式ie浏览器Opera

如何在html中操作SVG对象的问题，对于嵌入式的可以通过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文件
xmlns:xlink="http://www.w3.org/1999/xlink">


现在的解决方法是对与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
xmlns:xlink="http://www.w3.org/1999/xlink">

//svg.html


test - 锐客网






SVG支持用【JavaScript|使用javascript动态创建SVG对象的问题】 标签用来定义图形的路径

    推荐阅读


    上一篇：YUI3 事件

    下一篇：原创整合|对于线性调速方式，直流电机采用PWM方式调速的缺点有哪些（硬件每日一题）