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

[Anonymous]

Я новичок и в настоящее время работаю над клоном веб-сайта. Я столкнулся с проблемой, когда значок SVG обрезается сверху, когда он отображается внутри круглого контейнера.
Я пробовал несколько подходов CSS, таких как центрирование с помощью flexbox, настройка полей и изменение настроек переполнения, но проблема все еще сохраняется. Значок отцентрирован правильно, но небольшая часть SVG по-прежнему обрезана сверху.
Вот соответствующие HTML и CSS:
HTML

Financial

Активно общайтесь с клиентами, чтобы предоставлять им ценные услуги на базе искусственного интеллекта.

Изучите финансовые услуги














CSS
.sec-fi-card-img {

/\* border: 2px solid red; \*/

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;

/\* border: 1px; \*/

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;

/\* margin: 24px; \*/

display: block;

transform: scale(0.85);

}


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