我以下列方式使用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

enter image description here

Internet Explorer 11

enter image description here

Safari

enter image description here

这是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;它现在正在工作！

2 回答

0

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

阅读更多内容MAKING SVGS RESPONSIVE WITH CSS

回复于 2024-05-15T02:51:49+08:00
3
解决方案

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

在我的CSS中，我有
```
width: 50px;
```
但你还必须指定高度 . 它不是保留自身的方面 . 感谢大家！
回复于 2024-05-15T02:51:49+08:00

SVG高度伸展

解决方案

2 回答

解决方案

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

相关问题