使用 css 更改颜色 svg 文件

Posted 2023-02-22

【中文标题】使用 css 更改颜色 svg 文件

【英文标题】：Change color svg file using css

【发布时间】：2020-03-31 07:20:12

【问题描述】：

我使用 vue-simple-svg 包和 Vue。 我向组件发送图标和颜色：

<IconComponent name="comment.svg" color="#ffffff" />

在IconComponent 我得到道具：

<simple-svg
    :src="image"
    fill-class-name="fill-to-change"
    :fill="color"
    stroke-class-name="stroke-to-change"
    :stroke="color"
    custom-id="my-id"
    custom-class-name="my-class"
/>

props: 
    image: 
        type: String,
        required: true,
    ,
    color: 
        type: String,
        required: true,
    ,
,

但颜色不会更改为#ffffff。

所以我尝试使用 CSS 更改颜色：

我有带颜色的结构 svg 文件：

svg => g => g

我上课.my-class，我写代码：

.my-class g g 
   fill: #ffffff;
   stroke: #ffffff;

我尝试使用：

.fill-to-change 
   fill: #ffffff;

.stroke-to-change 
   stroke: #ffffff;

但颜色不会变成白色。

文件 SVG：

<?xml version="1.0" encoding="UTF-8"?>
<svg   viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: sketchtool 59.1 (101010) - https://sketch.com -->
    <title>afb3c770-9343-4219-b68b-48905c19ec63@1.00x</title>
    <desc>Created with sketchtool.</desc>
    <g id="Symbols" stroke="none" stroke- fill="none" fill-rule="evenodd" fill-opacity="0.6">
        <g id="Icons-/-Interfaces-/-user-plus" fill="#000000">
            <path d="M17,19 L17,16.5 C17,16.2238576 17.2238576,16 17.5,16 C17.7761424,16 18,16.2238576 18,16.5 L18,19 L20.5,19 C20.7761424,19 21,19.2238576 21,19.5 C21,19.7761424 20.7761424,20 20.5,20 L18,20 L18,22.5 C18,22.7761424 17.7761424,23 17.5,23 C17.2238576,23 17,22.7761424 17,22.5 L17,20 L14.5,20 C14.2238576,20 14,19.7761424 14,19.5 C14,19.2238576 14.2238576,19 14.5,19 L17,19 Z M14.0425135,13.5651442 C13.4188979,13.8445863 12.7275984,14 12,14 C11.2738711,14 10.5838946,13.8452135 9.96126583,13.5668358 L5.87929558,15.4222768 C5.34380416,15.665682 5,16.1996113 5,16.7878265 L5,17.5 C5,18.3284271 5.67157288,19 6.5,19 L11.5,19 C11.7761424,19 12,19.2238576 12,19.5 C12,19.7761424 11.7761424,20 11.5,20 L6.5,20 C5.11928813,20 4,18.8807119 4,17.5 L4,16.7878265 C4,15.8074678 4.57300693,14.9175857 5.46549264,14.5119103 L8.92215823,12.9406987 C7.75209123,12.0255364 7,10.6005984 7,9 C7,6.23857625 9.23857625,4 12,4 C14.7614237,4 17,6.23857625 17,9 C17,10.5929224 16.2551051,12.0118652 15.0946468,12.927497 L17.6966094,14.0402775 C17.9505071,14.1488619 18.0683068,14.4427117 17.9597225,14.6966094 C17.8511381,14.9505071 17.5572883,15.0683068 17.3033906,14.9597225 L14.0425135,13.5651442 L14.0425135,13.5651442 Z M12,13 C14.209139,13 16,11.209139 16,9 C16,6.790861 14.209139,5 12,5 C9.790861,5 8,6.790861 8,9 C8,11.209139 9.790861,13 12,13 Z" id="Combined-Shape"></path>
        </g>
    </g>
</svg>

【参考方案1】：

我有其他解决方案。我添加到 scss 文件 filter 例如：

&__image 
    filter: invert(35%) sepia(36%) saturate(7009%) hue-rotate(2deg) brightness(104%) contrast(88%);

要将颜色转换为过滤器格式（例如：#ef4f10），请使用CSS filter generator to convert from black to target hex color。

最好的效果是当 SVG 文件的默认颜色为黑色时：fill="#000000"。

【参考方案2】：

在 SVG 上使用 CSS

svg
    fill: #fff;
    stroke: #fff;

希望对你有用

【讨论】：

您能否在此处提供 SVG 代码或您遇到问题的实时链接

我不明白。你能解释一下吗？

显示 SVG 图像代码 示例（)

或提供我的实时 URL 链接

【参考方案3】：

在样式末尾添加 !important。 例如

.class g g
fill:#fff!important;

【讨论】：

第一件事 g 不能有填充或描边属性。在 g 中的元素中添加 !important。例如：- 路径、多边形、矩形等

【参考方案4】：

@michal 从 svg 标签内的所有标签中删除 'fill=""' 属性，然后你会得到结果。