我需要在我的應用程式中實作星級。但設計師只提供了一個邊界星圖作為附件。現在我需要重復 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>
uj5u.com熱心網友回復：
這里有兩個快速的 hack 解決方案，它們都需要修改 SVG（并且都可以以更有效的方式修改），并且都使用漸變填充，這與Robert Longson 上面建議的基本思想相同。
1.復制路徑，填充漸變
- 復制路徑，這樣你就有一份邊界副本和一份填充副本。
fill-rule="evenodd"從第一個中洗掉，path這樣內部就不會被減去，因此也會被填充。- 使用漸變填充第一個路徑（“后”路徑），該漸變使用硬停止來實作部分填充。（我在這里使用了橙色，以便您可以看到哪個是哪個。）
當然，您可以擺弄漸變的細節以將其準確地放在您想要的位置。這只是一個概念證明。
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.相同的想法，但內部和外部路徑分開。
（如果你打算走這條路，你可以很容易地創建一個路徑來定義填充的形狀。）
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/454968.html
標籤：javascript 反应 svg