使用CSS背景定位和尺寸调整的SVG雪碧图标

Question

我正在为使用SVG雪碧的客户端开发网站。 SVG文件包含相似大小的图标。该精灵正在使用CSS背景属性显示。一些图标是链接的一部分，其他图标用于文本输入和列表。你可以在这里看到它们是如何使用的：working example。这个问题影响了一些图标的定位和尺寸。您可以在顶部搜索输入和左下角的页脚导航中看到此信息。我似乎无法得到这些图标的正确位置和大小。我已经准备好了Facebook和Twitter图标，但类似的代码不适用于其他精灵图标。我附上了CSS和SVG代码以供参考。我还附加了PNG格式的精灵以供视觉参考。有什么建议么？谢谢。

CSS：

.footernav a.has-icon:before { 
    content:''; 
    display:inline-block; 
    width:2.090em; 
    height:1.47em; 
    margin-right:14px; 
    background:url(../images/sprite.svg) no-repeat 0 0; 
    background-size:1.407em 8.045em; 
    font-size:1.333em 
} 

.footernav a.sm:before { 
    margin-right:0 
} 

.footernav .has-icon.icon-contactus:before { 
    background-position:0 -2.210em 
} 

.footernav .has-icon.icon-webmap:before { 
    background-position:0 -26.679em 
} 

.footernav .has-icon.icon-sitemap:before { 
    background-position:0 -28.751em 
} 

.footernav .sm:link { 
    display:block; 
    width:1.34em; 
    height:1.36em; 
    background:url(../images/sprite.svg) no-repeat 0 0; 
    background-size:1.407em 8.045em; 
    text-indent:-999em; 
    font-size:1.566em 
} 

.footernav .icon-facebook:link { 
    background-position:0 0 
} 

.footernav .icon-twitter:link { 
    background-position:0 -1.474em 
} 

SVG（从Illustrator导出）：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<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 21.1 120.7" style="enable-background:new 0 0 21.1 120.7;" preserveAspectRatio="none" xml:space="preserve"> 
<g> 
<rect x="0.6" y="0.1" style="fill:#517CBE;" width="20" height="20"/> 
<path style="fill:#FFFFFF;" d="M8.6,8.8h0.8V8c0-0.3,0-0.9,0.3-1.2C10,6.4,10.4,6.2,11,6.2c1,0,1.5,0.1,1.5,0.1l-0.2,1.2 
    c0,0-0.3-0.1-0.7-0.1c-0.3,0-0.6,0.1-0.6,0.4v0.9h1.3l-0.1,1.2H11V14H9.5V9.9H8.6V8.8z"/> 
</g> 
<g style="enable-background:new ;"> 
<g> 
    <rect x="0.6" y="22.1" style="fill:#575858;" width="20" height="20"/> 
    <path style="fill:#575858;" d="M14.5,29.7c-0.3,0.1-0.6,0.2-0.9,0.3c0.3-0.2,0.6-0.5,0.7-0.9c-0.3,0.2-0.7,0.3-1,0.4 
     c-0.3-0.3-0.7-0.5-1.2-0.5c-0.9,0-1.6,0.7-1.6,1.6c0,0.1,0,0.3,0,0.4c-1.3-0.1-2.5-0.7-3.3-1.7C7,29.4,6.9,29.7,6.9,30 
     c0,0.6,0.3,1.1,0.7,1.3c-0.3,0-0.5-0.1-0.7-0.2v0c0,0.8,0.6,1.4,1.3,1.6c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0-0.2,0-0.3,0 
     c0.2,0.6,0.8,1.1,1.5,1.1c-0.6,0.4-1.3,0.7-2,0.7c-0.1,0-0.3,0-0.4,0c0.7,0.5,1.6,0.7,2.5,0.7c3,0,4.6-2.5,4.6-4.6 
     c0-0.1,0-0.1,0-0.2C14,30.3,14.3,30,14.5,29.7"/> 
</g> 
<g> 
    <rect x="0.6" y="22.1" style="fill:#429CD6;" width="20" height="20"/> 
    <path style="fill:#FFFFFF;" d="M14.5,29.7c-0.3,0.1-0.6,0.2-0.9,0.3c0.3-0.2,0.6-0.5,0.7-0.9c-0.3,0.2-0.7,0.3-1,0.4 
     c-0.3-0.3-0.7-0.5-1.2-0.5c-0.9,0-1.6,0.7-1.6,1.6c0,0.1,0,0.3,0,0.4c-1.3-0.1-2.5-0.7-3.3-1.7C7,29.4,6.9,29.7,6.9,30 
     c0,0.6,0.3,1.1,0.7,1.3c-0.3,0-0.5-0.1-0.7-0.2v0c0,0.8,0.6,1.4,1.3,1.6c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0-0.2,0-0.3,0 
     c0.2,0.6,0.8,1.1,1.5,1.1c-0.6,0.4-1.3,0.7-2,0.7c-0.1,0-0.3,0-0.4,0c0.7,0.5,1.6,0.7,2.5,0.7c3,0,4.6-2.5,4.6-4.6 
     c0-0.1,0-0.1,0-0.2C14,30.3,14.3,30,14.5,29.7"/> 
</g> 
</g> 
<rect x="-524" y="-189.9" style="fill:#429CD6;" width="400" height="400"/> 
<g> 
<path style="fill:#575757;" d="M14.9,49.4c0-2.8-3.4-5.2-7.4-5.2s-7.4,2.4-7.4,5.2c0,1.5,0.9,3,2.4,3.9c-0.2,0.5-0.8,1.4-1.3,1.9 
    c0,0,0,0,0,0c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.4,0.3,0.7,0.7,0.7c0,0,3.1-0.4,4.7-1.8c0.4,0,0.7,0.1,1.1,0.1 
    C11.5,54.6,14.9,52.2,14.9,49.4z"/> 
<path style="fill:#575757;" d="M18.7,55.9C20.1,55,21,53.4,21,52c0-2.2-2.1-4.2-5.1-5c-0.2-0.1-0.5,0.1-0.5,0.3s0.1,0.5,0.3,0.5 
    c2.6,0.6,4.4,2.4,4.4,4.1c0,1.2-0.9,2.6-2.2,3.3c-0.1,0.1-0.2,0.2-0.2,0.4c0,0.7,0.7,1.7,1.3,2.3c-0.9-0.2-2.9-0.7-3.9-1.6 
    c-0.1-0.1-0.2-0.1-0.4-0.1c-0.4,0-0.8,0.1-1.2,0.1c-1.5,0-2.8-0.3-4-1c-0.2-0.1-0.5,0-0.6,0.2c-0.1,0.2,0,0.5,0.2,0.6 
    c1.3,0.7,2.9,1.1,4.5,1.1c0.3,0,0.7,0,1.1-0.1c1.6,1.4,4.7,1.8,4.7,1.8c0.4,0,0.7-0.3,0.7-0.7c0-0.2-0.1-0.4-0.2-0.5 
    C19.5,57.3,18.9,56.4,18.7,55.9z"/> 
</g> 
<g> 
<path style="fill:#575757;" d="M14.6,66.7c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8 
    C16.4,65.9,15.6,66.7,14.6,66.7 M14.6,71.5c0,0,3.8-4.7,3.8-6.8c0-2.1-1.7-3.8-3.8-3.8c-2.1,0-3.8,1.7-3.8,3.8 
    C10.8,66.8,14.6,71.5,14.6,71.5 M5.8,80.6l-3.9-1.6V67.7l3.9,1.6V80.6z M20.5,80.3V66.2l-1.4-0.8c-0.1,0.4-0.3,0.8-0.5,1.3l0.5,0.4 
    v11.2l-3.9-1.6v-5.1C15.1,71.8,15,71.9,15,72l-0.4,0.5L14.2,72c0-0.1-0.1-0.2-0.3-0.3v5.6L7.2,80V68.8l3.5-1.2 
    c-0.2-0.4-0.4-0.9-0.6-1.2l-4.3,1.5l-5.3-2.2v14.2L5.8,82l9.4-3.9v0L20.5,80.3z"/> 
</g> 
<g> 
<path style="fill:#575757;" d="M20.5,96.5v3.6c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3h-3.6c-0.3,0-0.6-0.1-0.8-0.3 
    c-0.2-0.2-0.3-0.5-0.3-0.8v-3.6c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3H17v-2.1h-5.7v2.1h1.1c0.3,0,0.6,0.1,0.8,0.3 
    c0.2,0.2,0.3,0.5,0.3,0.8v3.6c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3H8.8c-0.3,0-0.6-0.1-0.8-0.3 
    c-0.2-0.2-0.3-0.5-0.3-0.8v-3.6c0-0.3,0.1-0.6,0.3-0.8s0.5-0.3,0.8-0.3h1.1v-2.1H4.1v2.1h1.1c0.3,0,0.6,0.1,0.8,0.3 
    s0.3,0.5,0.3,0.8v3.6c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3H1.6c-0.3,0-0.6-0.1-0.8-0.3c-0.2-0.2-0.3-0.5-0.3-0.8v-3.6 
    c0-0.3,0.1-0.6,0.3-0.8s0.5-0.3,0.8-0.3h1.1v-2.1c0-0.4,0.1-0.7,0.4-1s0.6-0.4,1-0.4h5.7v-2.1H8.8c-0.3,0-0.6-0.1-0.8-0.3 
    c-0.2-0.2-0.3-0.5-0.3-0.8v-3.6c0-0.3,0.1-0.6,0.3-0.8C8.2,84.1,8.5,84,8.8,84h3.6c0.3,0,0.6,0.1,0.8,0.3c0.2,0.2,0.3,0.5,0.3,0.8 
    v3.6c0,0.3-0.1,0.6-0.3,0.8c-0.2,0.2-0.5,0.3-0.8,0.3h-1.1v2.1H17c0.4,0,0.7,0.1,1,0.4c0.3,0.3,0.4,0.6,0.4,1v2.1h1.1 
    c0.3,0,0.6,0.1,0.8,0.3S20.5,96.2,20.5,96.5L20.5,96.5z"/> 
</g> 
<path id="path-2" style="opacity:0.54;fill:#575757;enable-background:new ;" d="M14.3,114.2h-0.8l-0.3-0.3 
c1-1.2,1.6-2.7,1.6-4.2c0-3.6-2.9-6.5-6.5-6.5h0c-3.6,0-6.5,2.9-6.5,6.5s2.9,6.5,6.5,6.5c1.6,0,3-0.6,4.2-1.6l0.3,0.3v0.8l5,5 
l1.5-1.5L14.3,114.2L14.3,114.2z M8.3,114.2c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5h0c2.5,0,4.5,2,4.5,4.5 
C12.8,112.2,10.8,114.2,8.3,114.2z"/> 
<rect style="display:none;opacity:0.5;fill:#424243;" width="100" height="22.1"/> 
</svg> 

Answer 1

这将有助于消除从您的SVG preserveAspectRatio="none"和固定的尺寸，例如width="100" height="600"。

考虑到这些尺寸，请在您的CSS中相应地设置background-size。对width和height始终使用1em，并使用font-size来控制图标元素的缩放比例。

.has-icon { 
    background-image: url(...); 
    background-size: 1em 6em; 
    width: 1em; 
    height: 1em; 
    font-size: 1em; /* Just tweak this property */ 
} 

要访问的每个图标，使用1em倍数background-position。

.has-icon.icon-twitter { 
    background-position: 0 -1em; 
} 

这假设每个图标都适合正方形区域，方块之间没有间隙;如果你的SVG不遵守这个规则，那么这样做可能是个好主意。祝你好运！

Answer 2

尝试这种情况：

.module.search .icon-search { display: block; width: 2.692em; height: 2.692em; position: absolute; top: 4px; left: 4px; background: transparent url(../images/sprite.svg) no-repeat 0 -6.556em; background-size: 1.407em 7.8em; font-size: 1em; }

我修改background-size和top: 4px;