使用CSS背景定位和大小调整

时间：2016-12-05 23:27:33

标签： css svg

我正在为使用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>

PNG sprite example

2 个答案:

答案 0 :(得分：0)

有助于从SVG中移除preserveAspectRatio="none"并修复尺寸，例如width="100" height="600"。

考虑到这些维度，请在CSS中相应地设置background-size。始终对1em和width使用height，并使用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不遵守这一点，那么最好这样做。祝你好运！

答案 1 :(得分：0)

试试这个：

.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;

相关问题
最新问题