HTML SVG <img/>是模糊/裁剪的角落

Question

我有以下HTML代码，其中包含用于呈现SVG的元素：

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

和以下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;
}

然而，不幸的是，SVG图像模糊，即有角落裁剪。到目前为止我已经阅读了here描述的解决方案，但遗憾的是我无法做到正确。

任何提示为什么会发生这种情况？

Answer 1

尝试将'image'更改为'img'并关闭第二个div 如下：

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