css - svg 悬停时奇怪的蓝色下划线

Question

我有 svg 用于社交媒体图标，每次我将鼠标悬停在它上面时，它都会创建这条蓝色下划线，而且似乎没有什么能把它去掉。我怎样才能删除它？

这是我如何包含它。

<a class="footer-socialmedia-icons" style="padding-right:0.5rem;" target="_blank" href="https://www.facebook.com">
    <img width="35px" height="35px" src="/files/IMG/facebook.svg" alt="facebook logo" class="">
</a>

编辑: 这是 svg:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
    <title>facebook</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="facebook" fill="#DBC5DA">
            <path d="M24.826,0 C11.137,0 0,11.137 0,24.826 C0,38.514 11.137,49.652 24.826,49.652 C38.514,49.652 49.652,38.514 49.652,24.826 C49.652,11.137 38.516,0 24.826,0 Z M31,25.7 L26.961,25.7 L26.961,40.096 L20.976,40.096 L20.976,25.7 L18.131,25.7 L18.131,20.612 L20.976,20.612 L20.976,17.321 C20.976,14.964 22.096,11.281 27.016,11.281 L31.451,11.298 L31.451,16.237 L28.232,16.237 C27.708,16.237 26.963,16.499 26.963,17.623 L26.963,20.613 L31.523,20.613 L31,25.7 Z" id="Shape"></path>
        </g>
    </g>
</svg>

编辑

事实证明，蓝线位于所有标签下方。尝试了 text-decoration:none 但它没有做任何事情。

Answer 1

某些浏览器会在 a 元素中为图像添加边框，以将它们显示为可点击的链接。

如果你不想这样，添加

a img {border:none}

到你的 CSS。
顺便说一下，这与 SVG 无关；它发生在链接内的所有图像上。