改变图标的颜色，部分没有被修改答案

【问题标题】：Change the color of the icon, a part has not been modified改变图标的颜色，部分没有被修改
【发布时间】：2022-08-19 09:24:19
【问题描述】：

我有一张SVG 格式的图像，图像是黑色的，我希望图像是灰色的。

我不明白为什么“圆形”总是黑色的？

#picture {
    fill: #7D7D7D;
   }

<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">
   <path id=\"picture\" d=\"M12 2A10.13 10.13 0 0 0 2 12a10 10 0 0 0 4 7.92V20h.1a9.7 9.7 0 0 0 11.8 0h.1v-.08A10 10 0 0 0 22 12 10.13 10.13 0 0 0 12 2zM8.07 18.93A3 3 0 0 1 11 16.57h2a3 3 0 0 1 2.93 2.36 7.75 7.75 0 0 1-7.86 0zm9.54-1.29A5 5 0 0 0 13 14.57h-2a5 5 0 0 0-4.61 3.07A8 8 0 0 1 4 12a8.1 8.1 0 0 1 8-8 8.1 8.1 0 0 1 8 8 8 8 0 0 1-2.39 5.64z\"/>
   <path d=\"M12 6a3.91 3.91 0 0 0-4 4 3.91 3.91 0 0 0 4 4 3.91 3.91 0 0 0 4-4 3.91 3.91 0 0 0-4-4zm0 6a1.91 1.91 0 0 1-2-2 1.91 1.91 0 0 1 2-2 1.91 1.91 0 0 1 2 2 1.91 1.91 0 0 1-2 2z\"/>
</svg>

#picture 仅选择第一条路径。第二个保留默认的黑色填充。改为将样式应用于 svg 元素

标签： css svg

【解决方案1】：

svg 图标中有 2 条路径，如果要更改所有 svg 的颜色，则必须为它们提供相同的 id

#picture {
    fill: #7D7D7D;
   }

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
   <path id="picture" d="M12 2A10.13 10.13 0 0 0 2 12a10 10 0 0 0 4 7.92V20h.1a9.7 9.7 0 0 0 11.8 0h.1v-.08A10 10 0 0 0 22 12 10.13 10.13 0 0 0 12 2zM8.07 18.93A3 3 0 0 1 11 16.57h2a3 3 0 0 1 2.93 2.36 7.75 7.75 0 0 1-7.86 0zm9.54-1.29A5 5 0 0 0 13 14.57h-2a5 5 0 0 0-4.61 3.07A8 8 0 0 1 4 12a8.1 8.1 0 0 1 8-8 8.1 8.1 0 0 1 8 8 8 8 0 0 1-2.39 5.64z"/>
   <path id="picture" d="M12 6a3.91 3.91 0 0 0-4 4 3.91 3.91 0 0 0 4 4 3.91 3.91 0 0 0 4-4 3.91 3.91 0 0 0-4-4zm0 6a1.91 1.91 0 0 1-2-2 1.91 1.91 0 0 1 2-2 1.91 1.91 0 0 1 2 2 1.91 1.91 0 0 1-2 2z"/>
</svg>

【讨论】：