如何用CSS裁剪SVG实现MudBlazor自定义精确评分组件？

你的方案完全可行，通过叠加空星和裁剪后的实星来实现任意比例的评分填充是非常直接的CSS实现思路，下面是具体的实现步骤和代码示例：

核心实现思路 #

利用相对定位的容器包裹两个MudIcon：底层显示灰色的StarOutline作为空星，上层用绝对定位放置黄色的Star实星，通过动态控制上层实星容器的宽度（或使用CSS裁剪），实现0-100%的填充比例，以此支持任意小数评分的展示。

具体实现步骤 #

1. 创建自定义评分组件 #

新建一个CustomRating.razor组件，通过循环生成每个星的容器，计算每个星的填充比例：

<div class="custom-rating">
    @for (int i = 1; i <= MaxStars; i++)
    {
        // 计算当前星的填充比例：范围0-1
        var fillRatio = Math.Clamp(Rating - (i - 1), 0d, 1d);
        <div class="star-wrapper">
            <!-- 底层空星 -->
            <MudIcon Icon="@Icons.Material.Outlined.Star" Color="Color.Default" />
            <!-- 上层裁剪后的实星容器 -->
            <div class="filled-star-container" style="width: @($"{fillRatio * 100}%")">
                <MudIcon Icon="@Icons.Material.Filled.Star" Color="Color.Warning" />
            </div>
        </div>
    }
</div>

@code {
    /// <summary>
    /// 要展示的平均评分（支持小数）
    /// </summary>
    [Parameter, EditorRequired]
    public double Rating { get; set; }

    /// <summary>
    /// 最大星数，默认5
    /// </summary>
    [Parameter]
    public int MaxStars { get; set; } = 5;
}

2. 添加组件样式 #

在同目录下创建CustomRating.razor.css，实现定位和裁剪效果：

.custom-rating {
    display: inline-flex;
    gap: 0.2rem; /* 星之间的间距 */
    align-items: center;
}

.star-wrapper {
    position: relative;
    width: 24px; /* 星图标大小，可根据需求调整 */
    height: 24px;
}

.star-wrapper .mud-icon {
    width: 100%;
    height: 100%;
    transition: all 0.2s ease; /* 可选：添加过渡动画 */
}

.filled-star-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}

3. 使用组件 #

在需要展示评分的页面直接引用：

<CustomRating Rating="3.21" />
<CustomRating Rating="4.88" MaxStars="10" />

其他可选方案 #

如果不想用双图标叠加，也可以尝试以下方式：

• SVG渐变填充：直接修改MudBlazor的Star SVG图标，通过线性渐变控制填充范围，但需要处理SVG的clipPath或mask属性，灵活性不如双图标方案。
• CSS背景裁剪：将实星设置为背景图，通过background-size和background-position控制显示比例，但需要将图标转为背景图，不如直接使用MudIcon便捷。

内容的提问来源于stack exchange，提问作者David Thielen