SVG高度伸展

Question

我以下列方式使用SVG作为图标 SVG是从Illustrator CC中保存的

<div class="social">
    <a href=""><img src="img/icon_twitter.svg"></a>
    <a href=""><img src="img/icon_facebook.svg"></a>
</div>

这是CSS。社交div是2的

的包装

.social {
    position: absolute;
    left: 40px;
    bottom: 40px;
}
.social img {
    width: 50px;
    margin-right: 10px;
}

以下是结果的截图，第一个是正常的（chrome） 另一个人在高处奇怪地伸展。

铬

Internet Explorer 11

Safari浏览器

这是SVG代码

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build     0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 28.4 28.4" enable-background="new 0 0 28.4 28.4" xml:space="preserve">
<path fill="#FFFFFF" d="M14.2,0C6.4,0,0.1,6.3,0.1,14.1c0,7.8,6.3,14.1,14.1,14.1s14.1-    6.3,14.1-14.1C28.4,6.3,22,0,14.2,0z
     M18,14.1h-2.4c0,3.9,0,8.7,0,8.7h-3.6c0,0,0-4.8,0-8.7h-1.7V11h1.7V9c0-1.4,0.7-    3.7,3.7-3.7l2.7,0v3c0,0-1.6,0-2,0
    c-0.3,0-0.8,0.2-0.8,0.8V11h2.8L18,14.1z"/>
</svg>

解决方案

在我的CSS中我只指定宽度：50px;对于包含SVG的图像元素。 我还必须指定一个高度：50px;它现在正在工作！

Answer 1

在您的SVG中移除height and width attr，这将使其响应

在MAKING SVGS RESPONSIVE WITH CSS

了解详情

Answer 2

解决方案

我还必须在CSS中指定height属性

在我的CSS中我曾经

width: 50px;

但你还必须指定身高。它并没有保留自己的方面。 谢谢大家！