如何在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
SVG支持用【JavaScript|使用javascript动态创建SVG对象的问题】 标签用来定义图形的路径
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- c语言|一文搞懂栈(stack)、堆(heap)、单片机裸机内存管理malloc
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等