0

Is there any way i could achieve this (see pictures), i have tried with fill="white" but that wont give white color to those parts where i want it, its easier to understand with picture below:

what i have done at the moment:

enter image description here

what i want to achieve:

enter image description here

my code:

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;
walee
  • 575
  • 4
  • 16
  • If you are simply flipping the color, maybe ``filter: invert(1)`` would be easier? – Neil Lu Jan 05 '22 at 12:42
  • 1
    `fill="black"` gives exactly the result you want. https://codesandbox.io/s/angry-glitter-gqf99?file=/src/App.js –  Jan 05 '22 at 12:45
  • should that be in place of fill:"white" ? you can copy that code and try – walee Jan 05 '22 at 12:45
  • @ChrisG your code is working but i'm doing exactly the same but it gives me all black now, not getting those white parts... – walee Jan 05 '22 at 12:56
  • 1
    The white part is the background. Just wrap the svg in a container with a white background. –  Jan 05 '22 at 12:57
  • Does this answer your question? [Default background color of SVG root element](https://stackoverflow.com/questions/11293026/default-background-color-of-svg-root-element) –  Jan 05 '22 at 13:00
  • I used a (like explained in the dupe) and updated the sandbox. –  Jan 05 '22 at 13:01
  • @ChrisG hey you were right now its working, do you want to put that your codesandbox as an answer so i can accept ? and if you want upvote my question, it would help – walee Jan 05 '22 at 13:02
  • Like I said, this is a duplicate so we're not supposed to answer it. –  Jan 05 '22 at 13:45

2 Answers2

0

You can use react style to insert color to background

<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>
nabil arta
  • 164
  • 1
  • 3
0

I think your snippet is mostly fine as it is. If you change all 3 fill="white" to black, and set a white background, it will look as expected

Tamás Katona
  • 683
  • 7
  • 13