Значок SVG обрезается сверху при использовании внутри круглого контейнера. ⇐ Html

[Anonymous]

Я столкнулся с проблемой, когда значок SVG обрезается сверху, когда он отображается внутри круглого контейнера.


Я пробовал центрировать с помощью flexbox, регулировать поля и изменять настройки переполнения, но проблема все еще сохраняется. Значок отцентрирован правильно, но небольшая часть SVG по-прежнему обрезана сверху.
Вот соответствующие HTML и 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);
}

Код: Выделить всё

[img]pexels-pixabay-53594.jpg[/img]

[img]https://i.sstatic.net/CE5lz.png[/img]

Подробнее здесь: https://stackoverflow.com/questions/798 ... -container