1. 爱易网页
  2. JavaSript
  3. 使用javascript动态创建SVG对象的有关问题

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

日期：2014-05-16　 浏览次数：20355 次

使用javascript动态创建SVG对象的问题
如何在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");
            }

相关资料更多>

  1. 框架中传递javascript函数的有关问题
  2. js 设立class
  3. 显示文本变为输入框
  4. jsp中得到客户端系统登录名
  5. JS缴获回车键的方法并模拟Tab键
  6. 关于 arguments 的深奥有关问题
  7. MyEclipse的JavaScript揭示插件(JSEclipse)
  8. 怎么使用JQuery获取对象的所有属性名称
  9. 怎么解决struts2与json包冲突的有关问题