修改svg格式图片的颜色

meetAlice

于 2025-02-24 18:08:18 发布

阅读量79

点赞数

分类专栏：前端 javascript 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_42129143/article/details/145834640

版权

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

javascript

7 篇文章

订阅专栏

封装

function _loadAndModifySvg(url,fillColor){
  return fetch(url)
  .then((response) => response.text())
  .then((svgText) => {
      // 创建一个 DOMParser 来解析 SVG
      const parser = new DOMParser();
      const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
      const svgElement = svgDoc.querySelector('svg');
      // 修改颜色
      if(fillColor){
          svgElement.querySelectorAll('[fill]').forEach((el) => {
              //填充
              if(el.getAttribute('fill')!=="none"){
                  el.setAttribute('fill', fillColor);
              }
              //边框
              el.setAttribute('stroke', fillColor);
          });
      }
      // 将 SVG 转换为字符串
      const serializer = new XMLSerializer();
      const modifiedSvg = serializer.serializeToString(svgElement);
      // 转换为 Data URI
      return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(modifiedSvg)}`;
  });
}

使用