大家好，我遇到了一个棘手的小问题：当我把SVG图标放在圆形容器里时，图标顶部总是会被裁剪掉一小部分。我已经尝试了用flexbox居中容器内容、调整边距，甚至把容器的overflow改成visible，但问题依然存在——图标确实是居中对齐的，但顶部就是有一截被切掉了，实在搞不懂哪里出了问题。

下面是我用到的相关HTML和CSS代码，麻烦各位帮忙排查一下：

CSS代码 #

.sec-fi-card-img {
    margin-left: auto;    
    width: 124px;    
    height: 126px;    
    position: relative;    
}

.sec-fi-card-img img {    
    width: 124px;    
    height: 126px;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    border-top-left-radius: 100%;
    border-bottom-right-radius: 15%;
}

.sec-fi-card-min {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.sec-fi-card-min img {
    width: 40px;
    height: 40px;
    display: block;
    transform: scale(0.85);
}

HTML代码 #

<div class="sec-fi-card-img">
    <img src="pexels-pixabay-53594.jpg" alt="" style="background: green" />
    <div class="sec-fi-card-min">
        <img src="https://i.sstatic.net/CE5lz.png" alt="" />
    </div>
</div>

我本来以为给SVG加transform: scale(0.85)缩小尺寸就能避开裁剪，但实际测试下来完全没用。有没有朋友能帮我分析下问题根源，或者给个可行的解决办法呀？万分感谢！