将 svg 图标颜色更改为不同的颜色答案

【问题标题】：changing svg icon color into different color将 svg 图标颜色更改为不同的颜色
【发布时间】：2022-01-05 12:39:16
【问题描述】：

有什么方法可以实现这一点（见图片），我尝试过使用 fill="white" 但这不会给我想要的那些部分提供白色，下面的图片更容易理解：

我现在做了什么：

我想要达到的目标：

我的代码：

import React from "react";

function Graph() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="35"
      height="35"
      viewBox="0 0 64 64"
    >
      <path
        fill="white"
        d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
      ></path>
      <path
        fill="white"
        d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
      ></path>
      <path
        fill="white"
        d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
      ></path>
    </svg>
  );
}

export default Graph;

【问题讨论】：

如果你只是简单地翻转颜色，也许filter: invert(1)会更容易？
fill="black" 给出了你想要的结果。 codesandbox.io/s/angry-glitter-gqf99?file=/src/App.js
应该代替 fill:"white" 吗？您可以复制该代码并尝试
@ChrisG 您的代码正在运行，但我正在做同样的事情，但它现在让我全黑了，没有得到那些白色的部分......
白色部分是背景。只需将 svg 包装在具有白色背景的容器中即可。

标签： javascript css reactjs image svg

【解决方案1】：

您可以使用 react 样式将颜色插入背景

<svg
      xmlns="http://www.w3.org/2000/svg"
      width="35"
      height="35"
      viewBox="0 0 64 64"
      style={{ backgroundColor: "black" }}
    >
      <path
        fill="white"
        d="M57 38c0-6.279-4.851-11.438-11-11.949v12.535l7.678 7.678A11.944 11.944 0 0057 38z"
      ></path>
      <path
        fill="white"
        d="M3 53c0 .551.449 1 1 1h56c.551 0 1-.449 1-1V22H3zm7-2a4 4 0 110-8 4 4 0 010 8zm12 0a4 4 0 110-8 4 4 0 010 8zm23-27c7.72 0 14 6.28 14 14s-6.28 14-14 14-14-6.28-14-14 6.28-14 14-14zM5 38h1v-9h4v9h4V27h4v11h4V25h4v13h1v2H5z"
      ></path>
      <path
        fill="white"
        d="M45 50c2.693 0 5.174-.903 7.179-2.407L44.586 40H33.181c.956 5.666 5.885 10 11.819 10zM44 26.051c-6.149.511-11 5.67-11 11.949h11zM60 10H4c-.551 0-1 .449-1 1v9h58v-9c0-.551-.449-1-1-1zm-50 7H6v-4h4zm8 0h-4v-4h4zm8 0h-4v-4h4z"
      ></path>
    </svg>

【讨论】：

【解决方案2】：

我认为你的 sn-p 基本上没问题。如果您将所有 3 个fill="white" 更改为黑色，并设置白色背景，它将看起来像预期的那样

【讨论】：