在 CSS 中更改 SVG 颜色答案

【问题标题】：Changing the SVG color in CSS在 CSS 中更改 SVG 颜色
【发布时间】：2022-11-17 11:58:39
【问题描述】：

我想在 css 中更改 svg 图标颜色，但由于某种原因它不会改变。请帮忙： https://codepen.io/Flowersj/pen/OJExzME

我尝试将类添加到父标签并尝试设置样式，但没有用。

HTML: <svg class="navigation-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" fill="rgba(0,0,0,1)"/></svg>

CSS： .navigation-icon { fill: red; }

【问题讨论】：

标签： css svg optimization seo fill

【解决方案1】：

您的类需要分配给路径，而不是 svg 容器。

body {
  background-color: black;
}
.navigation-icon {
  fill: red;
}

<body>
    <svg class="navigation-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path class="navigation-icon" d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" fill="rgba(0,0,0,1)"/>
    </svg>
</body>

【讨论】：

【解决方案2】：

AtomicUs 是正确的，您需要定位路径而不是 svg 元素，因为 svg 元素没有 fill 属性。在这个特定的 svg 中，您还可以删除空路径，因为它是多余的，然后定位父导航图标 svg 的子路径：

.navigation-icon path {
  fill: red;
}

<svg class="navigation-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
    <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z" fill="rgba(0,0,0,1)"/>
</svg>

【讨论】：