使用 CSS 部分填充 SVG 图像答案

【问题标题】：Fill partially an SVG image with react using CSS使用 CSS 部分填充 SVG 图像
【发布时间】：2021-03-06 10:13:36
【问题描述】：

我正在使用 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>

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

有人可以帮我吗？

【问题讨论】：

您好，您可以在这里找到答案stackoverflow.com/questions/29368138/…

标签： css reactjs svg

【解决方案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>

【讨论】：