能否制作任意形状进度条？心形进度条SVG边界溢出求助

我正在开发一款倒计时网页，用于显示距离和女友见面的剩余天、时、分、秒。计划添加一个基于剩余时间的爱心形状进度条，但出现了爱心滑块超出SVG图像边界的问题，尝试搜索资料及咨询ChatGPT均未解决。

HTML代码 #

<body>
    <main>
        <section id="content-page-container">
            <section id="counter-container">
                <div class="data-display">
                    <h3 class="data" id="days">00</h3>
                    <p class="data-text">Giorni</p>
                </div>
                <div class="data-display">
                    <h3 class="data" id="hours">00</h3>
                    <p class="data-text">Ore</p>
                </div>
                <div class="data-display">
                    <h3 class="data" id="minutes">00</h3>
                    <p class="data-text">Minuti</p>
                </div>
                <div class="data-display">
                    <h3 class="data" id="seconds">00</h3>
                    <p class="data-text">Secondi</p>
                </div>
            </section>
            <div>
                <div class="progress-bar-slider" id="slider">
                    <img src="src/images/heart-svgrepo-com.svg" class="heart">
                </div>
            </div>
        </section>
    </main>
</body>

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#content-page-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
#counter-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
}
.data-display{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem;
    width: 6rem;
}
.data{
    font-family: "Roboto", sans-serif;
    font-size: 3rem;
    margin-bottom: 0;
}
.data-text{
    font-family: "Roboto", sans-serif;
    font-size: 2rem;
}

/*================= Progress bar =================*/
.progress-bar-container{
    width: 30rem;
    height: 3rem;
    border: 2px solid black;
}
.progress-bar-slider{
    background-color: red;
    height: 100%;
    width: 20%;
}
.heart{
    width: 10rem;
}
/*================================================*/

@media (max-width: 576px){
    .data-display{
        width: 4rem;
        margin: 0.75rem;
    }
    .data{
        font-size: 2.5rem;
    }
    .data-text{
        font-size: 1.45rem;
    }
    .progress-bar-container{
        width: 20rem;
        height: 2rem;
    }
}

1. 补全HTML结构 #

将滑块放入定义好的progress-bar-container容器中，确保进度条层级正确：

<div class="progress-bar-container">
    <div class="progress-bar-slider" id="slider">
        <img src="src/images/heart-svgrepo-com.svg" class="heart">
    </div>
</div>

2. 修改CSS样式 #

通过定位和溢出隐藏解决滑块超出问题，同时调整爱心的尺寸与定位：

/*================= Progress bar =================*/
.progress-bar-container{
    width: 30rem;
    height: 3rem;
    border: 2px solid black;
    position: relative; /* 设置为定位父容器 */
    overflow: hidden; /* 隐藏超出容器的内容 */
}
.progress-bar-slider{
    background-color: red;
    height: 100%;
    width: 20%;
    position: relative;
    display: flex;
    align-items: center; /* 爱心垂直居中 */
}
.heart{
    width: 3rem; /* 适配容器高度，避免过大 */
    position: absolute;
    right: -1.5rem; /* 让爱心一半在滑块内，一半在外，视觉更自然 */
}
/*================================================*/

/* 适配移动端 */
@media (max-width: 576px){
    /* 其他原有样式保留 */
    .progress-bar-container{
        width: 20rem;
        height: 2rem;
    }
    .heart{
        width: 2rem;
        right: -1rem;
    }
}

说明 #

• overflow: hidden直接隐藏容器外的内容，彻底解决爱心超出边界的问题；
• 调整爱心宽度与容器高度一致，避免垂直方向溢出；
• 绝对定位让爱心锚定在滑块右侧，进度变化时滑块宽度改变，爱心会自然跟随进度移动；
• 移动端同步调整爱心尺寸和定位，保持整体适配性。

内容的提问来源于stack exchange，提问作者Un tizio tizio