javascript - 动态加载 svg、更改它并插入到文档中

Question

我需要加载 svg 文件，更改它(旋转并更改某些路径的颜色)，然后将其显示在网页上，无需任何外部库，只需使用纯 JS。我已经尝试过 MDN 中的这段代码，但不知道如何访问 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，可以在 Canvas 上，也可以将其附加为图像/swg

如何才能做到呢？谢谢

Answer 1

这是一个 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-loader，它将路径参数作为属性，将从我们的光栅文件中搜索并返回路径new -dgt.svg 并将其放入所需的模板中。最好让服务对文件进行 AJAX 调用。