HTML SVG <image> ist verschwommen/Ecken abgeschnitten

Question

Ich habe den folgenden HTML-Code ein Element zur Vorlage eines SVG enthält:

<div class="item"> 
    <div id="item_sla"> 
    <image title="imagetitle" src="SVGImage.svg"/> 
</div> 

und die folgende CSS:

.item { 
    height: 95.5px; 
    width: 100%; 
    margin-left:0; 
    background-color: #ffffff; 
} 
#item_sla { 
    width: 20px; 
    height: 20px; 
    object-fit: center; 
    margin-left: 10%; 
    margin-top: 23px; 
    float: left; 
} 

jedoch , das SVG-Bild ist leider verschwommen, dh abgeschnittene Ecken. Ich habe bisher die beschriebene Lösung here gelesen, aber leider kann ich es nicht richtig hinbekommen.

Irgendein Hinweis darauf, warum das passiert?

Answer 1

Try ‚Bild‘ auf ‚img‘ und schließen Sie die zweite div Wie folgt zu ändern:

<div class="item"> 
    <div id="item_sla"> 
    <img title="imagetitle" src="Nutshell.svg"/> 
    </div> 
</div>