修改SVG图标的颜色

努力的阿皓

已于 2024-09-11 19:02:22 修改

阅读量38

点赞数 1

分类专栏：样式文章标签：前端 javascript 服务器

于 2024-09-11 19:01:03 首次发布

本文链接：https://blog.csdn.net/2201_75874827/article/details/142147612

版权

样式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

svg图标里面的颜色不能用style样式直接修改，所以就需要修改path里面的颜色

步骤

1.修改掉原来的svg图标颜色

修改前

<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>icon_下跌</title>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="数据管理-普通表备份-10" transform="translate(-1042, -301)" fill-rule="nonzero">
            <g id="编组-6" transform="translate(524, 178)">
                <g id="编组备份-2" transform="translate(305, 30)">
                    <g id="icon_下跌" transform="translate(213, 93)">
                        <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="11.9975155" height="12"></rect>
                        <path d="M11.4000942,9.206 C11.0687919,9.206 10.8002184,8.93737085 10.8002184,8.606 L10.8002184,7.052 L7.27294886,10.58 C7.03897484,10.8126342 6.66109804,10.8126342 6.42712402,10.58 L4.32156005,8.474 L1.02824204,11.768 C0.793017452,12.0032733 0.411643036,12.0032733 0.176418444,11.768 C-0.058806148,11.5327267 -0.058806148,11.1512733 0.176418444,10.916 L3.89564825,7.196 C4.12962227,6.96336584 4.50749907,6.96336584 4.74147309,7.196 L6.84703706,9.302 L9.94839481,6.2 L8.40071532,6.2 C8.06941307,6.2 7.80083954,5.93137085 7.80083954,5.6 C7.80083954,5.26862915 8.06941307,5 8.40071532,5 L11.4000942,5 C11.7313964,5 12,5.26862915 12,5.6 L12,8.6 C12.0015714,8.76016693 11.939078,8.91432522 11.8264055,9.02814808 C11.7137329,9.14197094 11.560236,9.20600801 11.4000942,9.206 L11.4000942,9.206 Z" id="路径" fill="#03C160" transform="translate(6, 8.4722) scale(1, -1) translate(-6, -8.4722)"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

修改的地方以及修改后

<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>icon_下跌</title>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill="currentColor" fill-rule="evenodd">
        <g id="数据管理-普通表备份-10" transform="translate(-1042, -301)" fill-rule="nonzero">
            <g id="编组-6" transform="translate(524, 178)">
                <g id="编组备份-2" transform="translate(305, 30)">
                    <g id="icon_下跌" transform="translate(213, 93)">
                        <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="11.9975155" height="12"></rect>
                        <path d="M11.4000942,9.206 C11.0687919,9.206 10.8002184,8.93737085 10.8002184,8.606 L10.8002184,7.052 L7.27294886,10.58 C7.03897484,10.8126342 6.66109804,10.8126342 6.42712402,10.58 L4.32156005,8.474 L1.02824204,11.768 C0.793017452,12.0032733 0.411643036,12.0032733 0.176418444,11.768 C-0.058806148,11.5327267 -0.058806148,11.1512733 0.176418444,10.916 L3.89564825,7.196 C4.12962227,6.96336584 4.50749907,6.96336584 4.74147309,7.196 L6.84703706,9.302 L9.94839481,6.2 L8.40071532,6.2 C8.06941307,6.2 7.80083954,5.93137085 7.80083954,5.6 C7.80083954,5.26862915 8.06941307,5 8.40071532,5 L11.4000942,5 C11.7313964,5 12,5.26862915 12,5.6 L12,8.6 C12.0015714,8.76016693 11.939078,8.91432522 11.8264055,9.02814808 C11.7137329,9.14197094 11.560236,9.20600801 11.4000942,9.206 L11.4000942,9.206 Z" id="路径"  transform="translate(6, 8.4722) scale(1, -1) translate(-6, -8.4722)"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

2.使用并添加样式

<SvgIcon v-if="QoQ >= 0" name="icon-fall" size="12" class="fill-color2  mt-[5px] mr-[9px]"></SvgIcon>


.fill-color2 {
  fill: rgba(238, 55, 55, 1);
  color: rgba(238, 55, 55, 1);
}