如何在 svg 图像上添加边框而不重叠图像本身

Question

搜索了大多数类似的 stackoverflow 帖子，但没有结果，因为我的情况有点不同。

尝试在 svg 图像上添加边框，例如这些图像 here，但无法做到。

我注意到，当我增加边框半径时，它与音乐图标的右上角重叠，所以我希望完整的图标如下图所示。

Here 找到我正在处理的 svg 图片。

我还发现，如果你用文本编辑器打开那个 svg 图片，里面有一些信息； 我尝试更改填充颜色并工作。

请注意是否必须将其转换为 PNG 或使 svg 透明。

尝试了下面的代码，但它不起作用/ASP.Net MVC - CSS

<div>
    <img src="~/Content/images/music.svg" class="image-music" />
</div>

.image-music {
    padding: 0.6vh 1vh 0.6vh 1vh;    
    border-radius: 50%/50%;
    background-color: #FF4E50;
    border: 1vh solid #66f51c;
}

Answer 1

您需要使用容器 div 和弹性框。此外，您需要为父容器和内部图像设置单独的宽度和高度。

示例：https://jsfiddle.net/7rh1bteg/52/

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #66f51c;
}

.image-music {
  width: 40px;
  height: 40px;
}

<div>
    <div class="img-container">
      <img src="https://svgshare.com/i/Lz2.svg" class="image-music" />
    </div>
</div>