Question

我有一个.png精灵，它有效，但我切换到.svg，它将整个图像缩小到高度（24px）。这是我的网站：http://www.bethalessi.com/您可以在该空白区域的侧边栏中看到它。我的代码：

ul.social {
text-align: center;
margin-top: 4em;
}   
.social li {
display: inline-block;
}   
.social a {
display: block;
width: 28px;
height: 24px;
background: url(assets/images/social.svg) no-repeat;
}

如果我将高度更改为336px（文件的高度），它会显示正确的大小，但会为每个链接重复图像。

如何使用.svg文件制作精灵？

Answer 1

您需要稍微更改SVG。改变第4行：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 28 336" enable-background="new 0 0 28 336" xml:space="preserve">

到

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="28" height="336" enable-background="new 0 0 28 336" xml:space="preserve">

当前版本的SVG具有viewBox属性，告诉浏览器您希望SVG缩放以适合父容器。这是28x24的盒子。

更改后的版本使SVG成为固定大小（28x336），因此它现在应该与位图精灵表相似。

使用.svg文件进行精灵，但它不起作用

1 个答案: