css - 使用 CSS 对 SVG 图像进行部分填充

Question

我正在使用 ReactJS，我正在尝试部分填充此 SVG 图像。

我想要获得的结果是像 example 中那样有一个部分填充的星号.

这是我的 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>

我的想法是创建一个组件，在输入中输入一个数字来确定填充的百分比或类似的东西。

有人可以帮助我吗？

Answer 1

我会使用 linear gradient .您可以根据需要使用 react 改变 offset 属性来填充星号。

<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>