svg

svg:

本质：html文件

1、 渲染
fill：填充颜色
stroke：边框颜色

改变颜色：

let e = document.getElementById(“svg”);
let doc;
// let timer = setInterval(function () {
// doc = e.getSVGDocument();
// if (doc) {
// let list = doc.getElementsByTagName(“path”);
// for (let i = 0; i < list.length; i++) {
// list[i].style.fill = “red”;
// list[i].style.stroke = “green”;
// }
// clearInterval(timer);
// }
// }, 100);
e.onload = function () {
//解决异步
doc = e.getSVGDocument();
let list = doc.getElementsByTagName(“path”);
for (let i = 0; i < list.length; i++) {
list[i].style.fill = “red”;
list[i].style.stroke = “green”;
}
};

2、获取html,v-html手动插入(浏览器头部影响)
let url= <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"> <title>请假申请处理2</title> <g id="请假申请处理2"> <path id="Fill-1" class="cls-1" d="M47.87,85.29a28.05,28.05,0,1,1,23.31-49,2.15,2.15,0,0,0,2.6.24,2.31,2.31,0,0,0,.47-3.74,32.73,32.73,0,0,0-22.85-7.7c-16.48.93-30.14,14-31.32,30.35A33,33,0,0,0,46.93,90a2.17,2.17,0,0,0,2.59-1.64A2.21,2.21,0,0,0,47.87,85.29Z"/> <path id="Fill-3" class="cls-1" d="M45,70l9.91-9.8a2.53,2.53,0,0,0,.71-1.63v-14a2.36,2.36,0,0,0-4.72,0v13.3L41.71,67a2.22,2.22,0,0,0,0,3.26A2.56,2.56,0,0,0,45,70Zm45.3,1.87A16.39,16.39,0,1,0,64.59,58.33a15.88,15.88,0,0,0,7.08,13.3C60.35,76.07,54.21,88.43,54,100.1a5.11,5.11,0,0,0,1.41,3.5,4.68,4.68,0,0,0,3.3,1.4h44.59a4.82,4.82,0,0,0,4.72-4.9C107.76,88.67,101.16,76.3,90.31,71.87Zm-21-13.54A11.8,11.8,0,1,1,81.11,70,11.62,11.62,0,0,1,69.31,58.33Zm-10.62,42c.24-12.36,8-25.66,22.42-25.66,13.44,0,22.17,13.3,22.41,25.66Z"/> </g> </svg>