使用CSS用react部分填充SVG图像

Question

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

我想得到的结果是，像这个例子中那样，有一颗恒星被部分填充。

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

我会使用线性梯度。您可以使用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>