gpt4 book ai didi

html - SVG 高度拉伸(stretch)

转载 作者:太空宇宙 更新时间:2023-11-03 23:30:46 24 4
gpt4 key购买 nike

我通过以下方式使用 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。 social div 是 2 的包装

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

这是结果截图,第一个是正常的(chrome)另一个的高度奇怪地拉长了。

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 中我只指定了 width: 50px;对于包含 SVG 的图像元素。我还必须指定一个高度:50px;它现在工作了!

最佳答案

在你的 SVG 中删除 height 和 widthattr 这将使它响应

阅读更多信息 MAKING SVGS RESPONSIVE WITH CSS

关于html - SVG 高度拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25423121/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com