动态加载svg，将其更改并插入到文档中

我需要加载svg文件，将其更改（旋转并更改某些路径的颜色），然后将其显示在网页上，而无需任何外部库，只需使用普通JS。我试图从MDN这个代码，但不知道如何访问一个SVG的对象来操作SVG元素：动态加载svg，将其更改并插入到文档中

window.onload=run; 

function run() 
{ 

    loadSvg("/img/dgt.svg"); 

} 

function loadSvg(url) 
{ 
    var req=new XMLHttpRequest(); 
    req.onreadystatechange=function() 
    { if(req.readyState == 4) 
     { if(req.status == 200) 
      { var res=req.responseText; 
       draw(res); 
      } 
      else 
      { console.log("URL "+url+" not available"); 
      } 
     } 
    } 
    req.open("POST", url, true); 
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    req.send(); 
} 

function draw(svgData) 
{ 
    var c=document.getElementById("ctr"); 
    var ctx=c.getContext("2d"); 
    var DOMURL=window.URL || window.webkitURL || window; 
    var img=new Image(); 
    var svg=new Blob([svgData], {type: "image/svg+xml;charset=utf-8"}); 
    var url=DOMURL.createObjectURL(svg); 

    img.onload=function() 
     { 
      ctx.drawImage(img, 0, 0); 
      DOMURL.revokeObjectURL(url); 
     } 
    img.src=url; 
}

所以，我想达到的目标： 1）负载SWG作为一个字符串并转换它到SVG元素，或者只是将其作为SVG元素加载 2）做一些改变，特别是旋转和填充/颜色改变 3）在网页上绘制SVG，或者在画布上或者将其附加为图像/ swg

怎么办？谢谢

来源

2016-09-15 BbIKTOP

它以哪种方式失败？ yor调试器显示什么？ –

没有。它只是没有任何错误地画任何东西。我会尽力使小提琴现在 – BbIKTOP

单步调试器不能透露任何东西。绘画是否被调用？ onreadystatechange函数是否被调用等 –

这是一个AngularJS实现。将所需的SVG路径元素存储为光栅文件（如new-dgt.svg）。例如：

{ 
    "home" : "s.o.m.e.p.a.t.h", 
    "facebook" : "s.o.m.e.o.t.h.e.r.p.a.t.h" 
}

创建指令/组件，说SVG-装载机这需要路径作为参数属性，将搜索和从我们的光栅文件返回路径新dgt.svg和将其放入所需的模板中。优选地，使服务对该文件进行AJAX调用。

来源

2016-09-15 07:43:08

谢谢，但它应该没有任何图书馆，只是与纯js – BbIKTOP

动态加载svg，将其更改并插入到文档中

回答

相关问题