Fill partially an SVG image with react using CSS

Question

I'm using ReactJS, and I'm trying to fill partially this SVG image.

The result that I'd like to obtain is to have a star partially filled like in this example.

This is my SVG:

<svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.26 91.88">
  <defs>
    <style>
      .cls-1 {
        fill: none;
        stroke: #ff8d1e;
        stroke-miterlimit: 10;
        stroke-width: 4px;
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <title>stella vuota</title>
  <path class="cls-1" d="M38.91,36.22a1.26,1.26,0,0,0,1.43-1c1.23-3.94,9.34-29.69,9.34-29.69A2.42,2.42,0,0,1,50.52,4a1.82,1.82,0,0,1,2.78,1.1l9.49,30.15a1.13,1.13,0,0,0,1.3,1l31.33,0a2.1,2.1,0,0,1,1.94.85,1.65,1.65,0,0,1-.56,2.45L71.39,57.32a1.61,1.61,0,0,0-.73,2.22L80.32,88.3c.34,1,.81,2.08-.32,2.91s-2,.08-2.86-.57L53.51,73.16c-2-1.45-1.94-1.46-3.85,0L25.81,90.79a5.6,5.6,0,0,1-1.07.66A1.59,1.59,0,0,1,23,91.12a1.54,1.54,0,0,1-.56-1.73L32.56,59c.18-.53.25-.92-.32-1.32L6.68,39.78C5.61,39,5.25,38.3,5.52,37.46s.92-1.26,2.25-1.26Z" transform="translate(-3.43 -1.7)"/>
</svg>

My idea was to create a component with a number in input that determines the percentual of the filled or something similar.

Can someone help me?

Hi, Here you can find an answer stackoverflow.com/questions/29368138/… — lissettdm
– lissettdm, Commented Nov 23, 2020 at 17:36

Ruben Helsloot · Accepted Answer · 2020-11-23 17:01:57Z

I'd use a linear gradient. You can vary the offset attribute using react as you want to fill the star.

<svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.26 91.88">
  <defs>
    <linearGradient id="fill">
      <stop offset="30%" stop-color="#ff8d1e"></stop>
      <stop offset="30%" stop-color="white"></stop>
    <style>
      .cls-1 {
        fill: none;
        stroke: #ff8d1e;
        stroke-miterlimit: 10;
        stroke-width: 4px;
        fill-rule: evenodd;
        fill: url("#fill");
      }
    </style>
  </defs>
  <title>stella vuota</title>
  <path class="cls-1" d="M38.91,36.22a1.26,1.26,0,0,0,1.43-1c1.23-3.94,9.34-29.69,9.34-29.69A2.42,2.42,0,0,1,50.52,4a1.82,1.82,0,0,1,2.78,1.1l9.49,30.15a1.13,1.13,0,0,0,1.3,1l31.33,0a2.1,2.1,0,0,1,1.94.85,1.65,1.65,0,0,1-.56,2.45L71.39,57.32a1.61,1.61,0,0,0-.73,2.22L80.32,88.3c.34,1,.81,2.08-.32,2.91s-2,.08-2.86-.57L53.51,73.16c-2-1.45-1.94-1.46-3.85,0L25.81,90.79a5.6,5.6,0,0,1-1.07.66A1.59,1.59,0,0,1,23,91.12a1.54,1.54,0,0,1-.56-1.73L32.56,59c.18-.53.25-.92-.32-1.32L6.68,39.78C5.61,39,5.25,38.3,5.52,37.46s.92-1.26,2.25-1.26Z" transform="translate(-3.43 -1.7)"/>
</svg>

Collectives™ on Stack Overflow

Fill partially an SVG image with react using CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related