【问题标题】：SVG Height stretchingSVG 高度拉伸
【发布时间】：2014-10-14 21:32:05
【问题描述】：

我通过以下方式使用 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；它现在正在工作！

【问题讨论】：

图像文件是否设置了 viewBox 和 preserveAspectRatio？如果没有，您可能需要设置它们。如果您仍然遇到困难，向我们展示文件本身会有所帮助。
我在问题中添加了 SVG 代码！谢谢
尝试将 preserveAspectRatio="xMidYMid" 添加到 <svg> 元素。
啊哈找到了解决方案...在我的 CSS 中我必须添加 height: 50px;同样，我没有指定高度，只指定宽度。谢谢！

标签： html css svg

【解决方案1】：

在您的 SVG 中删除 height and widthattr 这将使其响应

阅读更多MAKING SVGS RESPONSIVE WITH CSS

【讨论】：

没有高度或宽度，我将 SVG 代码添加到我的问题中
总是有一个height和一个width如果你使用mac用chrome打开svg然后按cmd+alt+u查看view-source 然后复制它并删除 height

【解决方案2】：

解决方案

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

在我的 css 中，我有

width: 50px;

但您还必须指定高度。它并没有保留本身的方面。谢谢大家！

【讨论】：