SVG图片属性及修改颜色
背景：
某个项目中有个图标有两种状态，选中和未选中状态，分别展示两种颜色
之前UI给的SVG图都是直接设置两种颜色就好，但是这次的SVG图片只能是使用本身的颜色，我用CSS设置的颜色不生效
百度之后，分别设置了fill和stroke属性，但是fill设置不生效，stroke只对轮廓生效，和我需要的效果不一致，所以这个方法作废
一番查询后知道，fill是设置SVG颜色的属性
<path
d="M340.736 216.832A162.048 162.048 0 0 1 445.44 254.72a103.168 103.168 0 0 0 10.24 7.68 102.4 102.4 0 0 0 122.88-6.912 161.792 161.792 0 0 1 104.96-38.144 163.84 163.84 0 0 1 101.12 292.864 102.4 102.4 0 0 0-9.216 8.192L511.232 782.592 238.336 509.696l-5.12-4.864a166.4 166.4 0 0 1-16.128-16.128l-1.28-1.536-1.28-1.536A162.048 162.048 0 0 1 176.64 380.928a164.352 164.352 0 0 1 164.096-164.096m0-102.4A266.496 266.496 0 0 0 135.68 551.168h-0.256l4.352 4.352a268.032 268.032 0 0 0 26.112 26.112l314.624 315.136a43.264 43.264 0 0 0 61.184 0l306.176-305.92A266.24 266.24 0 1 0 512.768 177.152l-1.536-1.536h-0.256a265.472 265.472 0 0 0-169.984-61.44z"
fill="pink"
p-id="1467"
></path>
image.png
如上图，可以直接设置SVG为粉色
但是这样无法用CSS设置SVG的颜色了，需要SVG文件中的
fill属性改为currentColor，就可以使用CSS设置SVG的颜色了
<path
d="M340.736 216.832A162.048 162.048 0 0 1 445.44 254.72a103.168 103.168 0 0 0 10.24 7.68 102.4 102.4 0 0 0 122.88-6.912 161.792 161.792 0 0 1 104.96-38.144 163.84 163.84 0 0 1 101.12 292.864 102.4 102.4 0 0 0-9.216 8.192L511.232 782.592 238.336 509.696l-5.12-4.864a166.4 166.4 0 0 1-16.128-16.128l-1.28-1.536-1.28-1.536A162.048 162.048 0 0 1 176.64 380.928a164.352 164.352 0 0 1 164.096-164.096m0-102.4A266.496 266.496 0 0 0 135.68 551.168h-0.256l4.352 4.352a268.032 268.032 0 0 0 26.112 26.112l314.624 315.136a43.264 43.264 0 0 0 61.184 0l306.176-305.92A266.24 266.24 0 1 0 512.768 177.152l-1.536-1.536h-0.256a265.472 265.472 0 0 0-169.984-61.44z"
p-id="1467"
fill="currentColor"
></path>
.svg-icon {
color: red;
}
