SVG过滤器修改白色底图为任意颜色的用法

SVG过滤器修改白色底图为任意颜色的用法

用例背景，甲方提供了调色板数十种颜色，与上千种白色图标，展示面板需要根据所选调色板颜色，切换图标颜色。

1、feColorMatrix的语法

	<div>
        <svg height="0" xmlns="http://www.w3.org/2000/svg">
            <defs>
            //该处id为css样式的filter url 绑定id
                <filter id="change">
                    <feColorMatrix type="matrix" :values="selectColor" />
                </filter>
            </defs>
        </svg>
        <img class="item_img_huizhi" :src="imgSrc"/>
    </div>

2、 css样式

    height: 64px;
    width: 64px;
    padding: 6px;
    cursor: pointer;
    filter:url(#change);

3、 selectColor 颜色调整

这里的矩阵转换过于繁琐，不会转换的话，可以按照下面的方法简单来，颜色会略有偏差
这里的四行值分别表示 RGBA 三种颜色的分量，

 	如果要调一个橙黄色 #e77817，他的RGBA值为rgba(231,120,23,1)
 	分别用它们各自的值除以255，得到一个保留两位小数的数字，替换下面selectColor第一行的r,
 	第二行的g，第三行的b,得到相近的颜色
    const selectColor = ref('r 0 0 0 0  //r
     						0 g 0 0 0  //g
      						0 0 b 0 0    //b
       						0 0 0 1 0')  //a固定为1，不用管
     
     若颜色偏差还有一点，可鼠标识别图片颜色后，调整各自的值，
     例如，鼠标提取颜色为rgb(220,140,23)，将selectColor中r的值稍微调大，g的值稍微调小即可,