通过js 动态更改SVG的颜色
现在需要更改此图标的颜色
js代码：
// svg改变颜色
getChangeColorSvgBase64(
url,
color) {
//创建dom元素,先将svg加载到页面上
var
object =
document.
createElement(
"object");
object.
setAttribute(
"type",
"image/svg+xml");
object.
setAttribute(
"data",
url);
//添加到body中
document.
body.
appendChild(
object);
return
new
Promise((
resolve,
reject)
=> {
//svg图片加载完成后触发
object.
onload =
function () {
//这里获取svgDom
var
objectSvg =
object.
contentDocument;
var
objectSvgPaths =
objectSvg.
getElementsByTagName(
"path");
//修改颜色
for (
var
p
of
objectSvgPaths) {
p.
setAttribute(
"style",
`fill:
${
color
}
`);
}
//将修改颜色后的svg图片转换为base64
const
svg =
objectSvg.
getElementsByTagName(
"svg")[
0];
//将整个 document 对象序列化为一个 XML 字符串
const
s =
new
XMLSerializer().
serializeToString(
svg);
//通过window.btoa() 方法用于创建一个 base-64 编码的字符串
const
img =
`data:image/svg+xml;base64,
${
window.
btoa(
s)
}
`;
//操作完成后删除dom元素
object.
remove();
resolve(
img);
};
});
},
},
使用方法：
let
mapSvgBase64 =
await
this.
getChangeColorSvgBase64(
require(
"@/assets/images/map/project.svg"),
'pink');
更改成功
PNG