使用css更改svg文件的颜色

我正在使用软件包和Vue。 我正在向组件发送图标和颜色：

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

但颜色不会更改为ffffff

因此，我尝试使用CSS更改颜色：

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

svg=>g=>g

我有课，我的课，我写代码：

.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 width="24px" height="24px" 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-width="1" 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>

在SVG上使用CSS

svg{
    fill: #fff;
    stroke: #fff;
}

---

希望它对您有用

添加！在风格的末尾很重要。 乙二醇

@米哈尔

---

从svg标记内的所有标记中删除'fill='属性，然后您将得到结果。

我有其他解决方案。我添加到了scss文件过滤器，例如：

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

要将颜色转换为过滤器格式，例如：ef4f10，请使用

---

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

您可以在此处提供SVG代码，或者在遇到问题的地方提供实时链接吗？我不理解。你能解释一下吗？给我看SVG图像代码示例，或者给我提供live URL链接g不能具有填充或笔划属性的第一件事。添加在g中的元素中很重要。例如：-路径、多边形、矩形等

.class g g{
fill:#fff!important;
}

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