<a> Link around svg behaves strangely

Question

In my Website I have svg icons, i used this script: https://github.com/tiagoporto/jquery-svg-to-inline

工作正常。

所以我用标签包裹了我的图标：

 <a href="https://open.spotify.com/" target="_blank" class="svg-link"><img src="<?php bloginfo('template_url');?>/svg/play-white.svg"  class="svg"></a>

但这产生了这个输出：

这是一张突出显示<svg></svg>

的萤火虫的照片

橙色部分越过灰色。我将灰色设置为高度60px。 svg也是60px。物品上没有衬垫或边距。

我的意思是我可以做溢出：隐藏在灰色的div上。但我想知道是否有更优雅的方式，链接只是svg的大小 - 而不是更高。

非常感谢你！

Answer 1

这是我的工作范例：

  <div class="col-md-2 col-sm-3 svg-link-wrapper">
     <a href="#musik" class="svg-link"><img src="icon.svg"  class="svg"></a>
  </div>

.svg-link {
  display: inline-block;
  height: 60px;
}

.svg-link-wrapper {
    text-align: right;
    height: 60px;
 }

Answer 2

我发现我会有更好的解决方案！ 如果您将标签背景图像作为SVG，请设置高度和宽度并准备就绪！

a .svg-link { 
                background-image: url(./svg/musik.svg);
                height: 45px;
                width: 45px;
            }

Answer 3

您可能对z-index标签感兴趣。 https://www.w3schools.com/cssref/pr_pos_z-index.asp