Das SVG-Symbol wird von oben abgeschnitten, wenn es in einem runden Container verwendet wird ⇐ HTML

[Anonymous]

Ich stehe vor einem Problem, bei dem ein SVG-Symbol von oben abgeschnitten wird, wenn es in einem kreisförmigen Container angezeigt wird.


Ich habe versucht, mit Flexbox zu zentrieren, Ränder anzupassen und Überlaufeinstellungen zu ändern, aber das Problem besteht immer noch. Das Symbol ist korrekt zentriert, aber ein kleiner Teil der SVG-Datei ist immer noch oben abgeschnitten.
Hier ist das relevante HTML und CSS:

Code: Select all

.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);
}

Code: Select all

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

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