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，无论是在画布上还是仅将其作为图像/ 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调用。

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

1 个答案: