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

Question

我有一个.png精灵，它可以工作，但我切换到.svg，它将整个图像缩小到高度（24像素）。这里是我的网站：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），因此它现在的行为应该与位图精灵表类似。