有没有办法使用 CSS 裁剪 SVG 的显示？

Question

我正在创建一个类似于 MudRating 的组件来显示某个项目的平均评分。因此，与仅允许 1 - 5 的整数值的 MudRating 不同，这通常会获得双精度的评级。例如 3.21 或 4.88。

目前MudBlazor只有空星、半星和全星。因此评分必须显示为：

这些渲染（RatingAverage.razor）为：

@for (var i = 0; i < numFullStars; i++)
{
    <MudIcon Icon="@Icons.Material.Filled.Star" Color="Color.Warning" />
}

@if (showHalfStar)
{
    <MudIcon Icon="@Icons.Material.Filled.StarHalf" Color="Color.Warning" />
}

@for (var i = startEmptyStars; i < 5; i++)
{
    <MudIcon Icon="@Icons.Material.Filled.StarOutline" Color="Color.Warning" />
}

这是我的问题。有没有办法将部分星星渲染为：

<MudIcon Icon="@Icons.Material.Filled.StarOutline" Color="Color.Warning" />
<MudIcon Crop="0,0, @width ,1" Position="OnTopStarOutline" Icon="@Icons.Material.Filled.Star" Color="Color.Warning" />

地点：

• Position="OnTopStarOutline"

  （显然需要是其他东西）会将

  Star

  渲染在

  StarOutline

之上

• @width

  是一个从 0.0 到 1.0 的值，它将

  Star

  裁剪为宽度的百分比，因此它仅覆盖

  StarOutline

  的最左边，就结束了。

有办法做到这一点吗？如果是这样，怎么办？我认为这是一个 CSS 问题。但如果还有其他方法，请赐教。

Answer 1

使用剪辑路径。我无法在代码片段中使用 MudIcon，因此这些圆

<span>

仅用于演示：

.icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  position: relative;
}

.icon::before {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid red;
  border-radius: 50%;
}

.icon::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  background: red;
  border-radius: 50%;
  clip-path: inset(0 calc(100% - var(--width, 0%)) 0 0);
}

<span class="icon" style="--width:10%"></span>
<span class="icon" style="--width:20%"></span>
<span class="icon" style="--width:30%"></span>
<span class="icon" style="--width:40%"></span>
<span class="icon" style="--width:50%"></span>
<span class="icon" style="--width:60%"></span>
<span class="icon" style="--width:70%"></span>
<span class="icon" style="--width:80%"></span>
<span class="icon" style="--width:90%"></span>