求助：实现SVG心形:hover从下到上渐变填充的解决方案

问题核心 #

你当前的两个关键问题：

1. 用作填充的.card__icone__active SVG里是矩形而非心形路径，导致hover时显示矩形而非心形填充
2. 未利用父容器的overflow:hidden裁剪填充元素，反而依赖z-index控制层级，这在SVG叠加场景下并非最优解

修改后的代码及说明 #

1. 修正HTML：替换填充SVG的路径为心形

将.card__icone__active里的矩形替换为和默认SVG完全一致的心形路径，确保填充形状与空心心形匹配：

<div class="card__icone">
    <svg width="23" height="23" viewBox="0 0 23 21" fill="none" class="card__icone__default" xmlns="http://www.w3.org/2000/svg">
        <path d="M20.3647 1.43666C18.01 -0.752399 14.5081 -0.358649 12.3468 2.07416L11.5003 3.02573L10.6538 2.07416C8.49677 -0.358649 4.99052 -0.752399 2.63583 1.43666C-0.0626076 3.94916 -0.204405 8.45854 2.21044 11.182L10.5249 20.5476C11.062 21.1523 11.9343 21.1523 12.4714 20.5476L20.7858 11.182C23.205 8.45854 23.0632 3.94916 20.3647 1.43666Z" stroke="#101010"/>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" class="card__icone__active" width="23" height="23" viewBox="0 0 23 21">
        <path d="M20.3647 1.43666C18.01 -0.752399 14.5081 -0.358649 12.3468 2.07416L11.5003 3.02573L10.6538 2.07416C8.49677 -0.358649 4.99052 -0.752399 2.63583 1.43666C-0.0626076 3.94916 -0.204405 8.45854 2.21044 11.182L10.5249 20.5476C11.062 21.1523 11.9343 21.1523 12.4714 20.5476L20.7858 11.182C23.205 8.45854 23.0632 3.94916 20.3647 1.43666Z" fill="url(#paint0_linear_25368_713)"/>
        <defs>
            <linearGradient id="paint0_linear_25368_713" x1="11.5" y1="-5.45937" x2="3.93419" y2="27.993" gradientUnits="userSpaceOnUse">
                <stop stop-color="#9356DC"/>
                <stop offset="1" stop-color="#FF79DA"/>
            </linearGradient>
        </defs>
    </svg>
</div>

2. 调整CSS：用overflow裁剪实现填充动画

核心是给父容器添加overflow:hidden，让填充心形仅在容器范围内显示，配合位移动画实现从下到上的填充效果：

.card__icone{
    position: relative;
    overflow: hidden; /* 关键：裁剪超出容器的填充元素 */
    height: 23px;
    width: 23px; /* 明确容器尺寸，与SVG保持一致 */
}

.card__icone__default{
    position: relative;
    cursor: pointer;
    z-index: 2; /* 确保空心心形在填充层上方 */
}

.card__icone__active{
    position: absolute;
    left: 0;
    top: 23px; /* 初始位置在容器下方，完全隐藏 */
    transition: transform 0.6s ease; /* 平滑过渡动画 */
    z-index: 1;
}

.card__icone:hover .card__icone__active{
    transform: translateY(-23px); /* 向上移动整个高度，完全显示填充心形 */
}

关键改动说明 #

• 统一两个SVG的尺寸和viewBox，确保心形完全对齐
• 父容器的overflow:hidden是核心，让填充心形在初始状态下完全隐藏，hover时仅显示容器内的部分
• 简化定位属性，移除不必要的right:0，改用left:0确保元素对齐
• 调整动画位移值，让填充心形刚好从完全隐藏过渡到完全显示

内容的提问来源于stack exchange，提问作者Grégory LACROIX