前端开发中svg图片修改颜色

        最近公司的古早纯前端项目需要拓展，优化了一下svg图片颜色变换，记录一下。

一、svg图片中影响图片颜色的元素

1. fill属性：
   • 用于设置SVG形状的内部填充颜色。
   • 可以在SVG元素（如<rect>、<circle>、<path>等）中直接设置fill属性来指定填充颜色。
   • 填充颜色可以是十六进制颜色代码（如#FF0000表示红色）、RGB/RGBA值、颜色名称或渐变定义。
2. stroke属性：
   • 用于设置SVG形状的边框颜色。
   • 类似于fill属性，stroke属性也可以在SVG元素中直接设置。
   • 边框颜色同样可以是十六进制颜色代码、RGB/RGBA值、颜色名称等。
3. stop-color属性：
   • 在渐变定义中使用，用于指定渐变中的各个颜色停靠点的颜色。
   • 渐变定义通常包含在<defs>元素中，并使用<linearGradient>或<radialGradient>元素来创建。
   • <stop>元素内的stop-color属性定义了该停靠点的颜色。
4. opacity属性：
   • 用于设置SVG元素的不透明度。
   • 不透明度值范围从0（完全透明）到1（完全不透明）。
   • 可以应用于整个SVG元素或单独的子元素。
5. filter属性：
   • SVG滤镜可以用来对图形进行各种视觉效果处理，包括颜色调整。
   • 例如，可以使用<feColorMatrix>滤镜来调整图形的颜色矩阵，从而改变其颜色。
   • 其他滤镜如<feGaussianBlur>用于模糊效果，<feOffset>用于创建阴影等，虽然它们不直接改变颜色，但可以通过影响视觉效果来间接影响颜色的感知。
6. CSS样式：
   • 可以通过CSS来设置或修改SVG元素的颜色属性。
   • 例如，使用CSS选择器来选择SVG元素，并通过fill、stroke等属性来更改其颜色。
   • CSS样式可以嵌入在SVG文件中，也可以通过外部样式表来应用。
7. 渐变和图案填充：
   • 除了纯色填充外，SVG还支持使用渐变（线性渐变和径向渐变）和图案填充来设置形状的颜色。
   • 渐变和图案填充可以在<defs>元素中定义，并通过fill属性引用。

二、实现替换svg图片颜色

        详细功能是获取svg文件，通过查找有效的十六进制颜色值来替换图片颜色，代码如下：

var svg_tmpl = $.ajax({
  url: urlImage,//svg图片路径
  async: false,
  cache: false
})
//获取svg文件
var svgText = svg_tmpl.responseText
//重写svg颜色替换
svgText = replaceHexColorWithRgba(svgText, value)



//判断文件中#后面的内容是否是有效的十六进制颜色值,如果是，则替换颜色值
replaceHexColorWithRgba(svg, value) {
    const hexColorPattern = /(#[0-9a-fA-F]{3,6})/g;
    return svg.replace(hexColorPattern, (match) => {
      if (isValidHexColor(match)) {
        return value;
      }
      return match; // 如果不是有效的十六进制颜色值，则返回原匹配值
    });
},


//检查是否为有效的十六进制颜色值
isValidHexColor(hex) {
    return /^#[0-9a-fA-F]{3,6}$/.test(hex);
}