如何用特定长度的颜色填充 svg 图像

Question

我需要在我的应用中实施星级评分。 但设计师只提供了一张边框星图作为附件。 现在我需要重复 svg 并同时根据第二张图片中显示的评级填写它。 但我不确定是否可以用特定宽度的颜色填充 svg。 我不需要完整的解决方案，也欢迎任何参考或概念答案。 提供的星标 svg和需要的实现提供的 SVG 代码

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9.177 7.72a.5.5 0 0 1-.376.273l-5.309.771a.5.5 0 0 0-.277.853l3.841 3.745a.5.5 0 0 1 .144.442l-.907 5.288a.5.5 0 0 0 .726.527l4.748-2.497a.5.5 0 0 1 .466 0l4.748 2.497a.5.5 0 0 0 .726-.527l-.907-5.288a.5.5 0 0 1 .143-.442l3.842-3.745a.5.5 0 0 0-.277-.853l-5.309-.771a.5.5 0 0 1-.376-.274l-2.375-4.81a.5.5 0 0 0-.896 0l-2.375 4.81zM12 6.52l-1.03 2.084a2.5 2.5 0 0 1-1.88 1.368l-2.302.334 1.665 1.624a2.5 2.5 0 0 1 .72 2.212l-.394 2.292 2.059-1.082a2.5 2.5 0 0 1 2.326 0l2.059 1.082-.393-2.292a2.5 2.5 0 0 1 .718-2.212l1.666-1.624-2.302-.334a2.5 2.5 0 0 1-1.882-1.368L12 6.52z" clip-rule="evenodd"/></svg>

Answer 1

这里有两个快速破解解决方案，都需要修改 SVG（并且都可以以更有效的方式进行修改），并且都使用渐变填充，这与Robert Longson 在上面建议的基本思想相同。

1.复制路径，填充渐变

1. 复制路径，这样您就有一份边框副本和一份填充副本。
2. 从第一path中删除fill-rule="evenodd" ，这样内部就不会被减去，从而也被填充。
3. 用使用硬停止的渐变填充第一条路径（“后”路径）以实现部分填充。 （我在这里使用了橙色，这样你就可以看出哪个是哪个。）

当然，您可以摆弄渐变的细节，使其准确地出现在您想要的位置。 这只是一个概念证明。

 svg { max-width: 200px; /* not relevant */ }.stop1 { stop-color: orange; }.stop2 { stop-opacity: 0; } path.fill { fill: url(#gradient-fill); }

 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"> <defs> <linearGradient id="gradient-fill" x1="0" x2="1" y1="1" y2="0.5"> <stop class="stop1" offset="70%"/> <stop class="stop2" offset="70%"/> </linearGradient> </defs> <path class="fill" d="M9.177 7.72a.5.5 0 0 1-.376.273l-5.309.771a.5.5 0 0 0-.277.853l3.841 3.745a.5.5 0 0 1.144.442l-.907 5.288a.5.5 0 0 0.726.527l4.748-2.497a.5.5 0 0 1.466 0l4.748 2.497a.5.5 0 0 0.726-.527l-.907-5.288a.5.5 0 0 1.143-.442l3.842-3.745a.5.5 0 0 0-.277-.853l-5.309-.771a.5.5 0 0 1-.376-.274l-2.375-4.81a.5.5 0 0 0-.896 0l-2.375 4.81zM12 6.52l-1.03 2.084a2.5 2.5 0 0 1-1.88 1.368l-2.302.334 1.665 1.624a2.5 2.5 0 0 1.72 2.212l-.394 2.292 2.059-1.082a2.5 2.5 0 0 1 2.326 0l2.059 1.082-.393-2.292a2.5 2.5 0 0 1.718-2.212l1.666-1.624-2.302-.334a2.5 2.5 0 0 1-1.882-1.368L12 6.52z"/> <path fill-rule="evenodd" d="M9.177 7.72a.5.5 0 0 1-.376.273l-5.309.771a.5.5 0 0 0-.277.853l3.841 3.745a.5.5 0 0 1.144.442l-.907 5.288a.5.5 0 0 0.726.527l4.748-2.497a.5.5 0 0 1.466 0l4.748 2.497a.5.5 0 0 0.726-.527l-.907-5.288a.5.5 0 0 1.143-.442l3.842-3.745a.5.5 0 0 0-.277-.853l-5.309-.771a.5.5 0 0 1-.376-.274l-2.375-4.81a.5.5 0 0 0-.896 0l-2.375 4.81zM12 6.52l-1.03 2.084a2.5 2.5 0 0 1-1.88 1.368l-2.302.334 1.665 1.624a2.5 2.5 0 0 1.72 2.212l-.394 2.292 2.059-1.082a2.5 2.5 0 0 1 2.326 0l2.059 1.082-.393-2.292a2.5 2.5 0 0 1.718-2.212l1.666-1.624-2.302-.334a2.5 2.5 0 0 1-1.882-1.368L12 6.52z"/> </svg>

2. 相同的想法，但内部路径和外部路径分开。

（如果你要去 go 这条路线，你可以很容易地创建一个路径来定义填充的形状。）

 svg { max-width: 200px; /* not relevant */ }.stop1 { stop-color: orange; }.stop2 { stop-color: white; } path.inner { fill: url(#gradient-fill); }

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <defs> <linearGradient id="gradient-fill" x1="0" x2="1" y1="1" y2="0.5"> <stop class="stop1" offset="70%"/> <stop class="stop2" offset="70%"/> </linearGradient> </defs> <path class="outer" d="M9.18,8.57C9.1,8.71,8.96,8.82,8.8,8.84L3.49,9.61C3.22,9.65,3.03,9.9,3.07,10.18 c0.02,0.11,0.07,0.21,0.15,0.29l3.84,3.74c0.12,0.11,0.17,0.28,0.14,0.44l-0.91,5.29c-0.05,0.27,0.14,0.53,0.41,0.58 c0.11,0.02,0.22,0,0.32-0.05l4.75-2.5c0.15-0.08,0.32-0.08,0.47,0l4.75,2.5c0.24,0.13,0.55,0.04,0.68-0.21 c0.05-0.1,0.07-0.21,0.05-0.32l-0.91-5.29c-0.03-0.16,0.03-0.33,0.14-0.44l3.84-3.74c0.2-0.19,0.2-0.51,0.01-0.71 c-0.08-0.08-0.18-0.13-0.29-0.15L15.2,8.84c-0.16-0.02-0.3-0.13-0.38-0.27l-2.38-4.81c-0.12-0.25-0.42-0.35-0.67-0.23 c-0.1,0.05-0.18,0.13-0.23,0.23L9.18,8.57L9.18,8.57z"/> <path class="inner" d="M12,7.37l-1.03,2.08c-0.36,0.74-1.07,1.25-1.88,1.37l-2.3,0.33l1.66,1.62c0.59,0.57,0.86,1.4,0.72,2.21 l-0.39,2.29l2.06-1.08c0.73-0.38,1.6-0.38,2.33,0l2.06,1.08l-0.39-2.29c-0.14-0.81,0.13-1.64,0.72-2.21l1.67-1.62l-2.3-0.33 c-0.81-0.12-1.52-0.63-1.88-1.37L12,7.37z"/> </svg>