CODEWITHSUNDEEP
javascriptcssreactjssvgsvg-animate
Egom
Egom

Reputation: 21

change the filled color of an SVG image in react

I'm trying the control the filled level of an oval SVG.

    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="grey">
<g>
    <g>
        <path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M256,490.667
            c-129.387,0-234.667-105.28-234.667-234.667S126.613,21.333,256,21.333S490.667,126.613,490.667,256S385.387,490.667,256,490.667z
            "/>
    </g>

i started to just trying to fill the oval to 100% and it'snot working.

    <Card sx={{ maxWidth: 345 }}>
      <CardHeader
       
        }
...
      <div>
      <img src={OvalTank} style={Style} alt="Oval Tank" className=" ovalFilled" />
      </div>

Style being set this way

  const Style = {
    height: 200,
    margin: 'auto',
    display: 'flex',
    justifyContent: 'center',
    fill: blue,
  }

I try removing the fill attribute from the svg file(which is controlling the border color only).

can someone help to find out how to control filled color?

thanks

Upvotes: 0

Views: 967

Answers (1)

herrstrietzel
herrstrietzel

Reputation: 17215

With some adjustments in your svg markup, you could place your svg assets by a <use> element.

Your svg element will need a an id for referencing.
I recommend wrapping your graphic in a <symbol> element like so:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <symbol id="path">
    <path  d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M256,490.667
c-129.387,0-234.667-105.28-234.667-234.667S126.613,21.333,256,21.333S490.667,126.613,490.667,256S385.387,490.667,256,490.667z" />
  </symbol>
</svg>

Now you're able to place an instance of your image by a reference:

<svg viewBox="0 0 512 512" style="fill:red">
  <use href="ovalTank.svg#path"  />
</svg>

Since we've stripped all fill attributes, we can style/override colors for every symbol instance.
The main benefit of this symbol/use approach is the idea of storing multiple graphic assets in one single svg file. However, loading symbols from a external file will need this file to be on same domain.

Here is an inlined svg example: 

svg {
  display: inline-block;
  width: 5em;
}
<!-- svg file content -->
<svg style="display:none;" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
  <symbol id="path">
    <path  d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M256,490.667
c-129.387,0-234.667-105.28-234.667-234.667S126.613,21.333,256,21.333S490.667,126.613,490.667,256S385.387,490.667,256,490.667z" />
  </symbol>
<symbol id="icon-calendar" viewBox="0 0 448 512">
    <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z" />
  </symbol>
</svg>

<!-- usage -->
<svg viewBox="0 0 512 512" style="fill:red">
    <use href="#path"  />
</svg>

<svg viewBox="0 0 448 512" style="fill:green">
    <use href="#icon-calendar"  />
</svg>

Upvotes: 1

Related Questions