Question

我正在我的项目中尝试SVG精灵，但它没有按预期工作，精灵包含三个图像，如下所示：

enter image description here

Original Image

当我在CSS中调用时，它显示放大所有三个图像，而不是特定图像的背景位置定义，似乎我还要定义一些额外的东西，经过他们已定义路径的一些文章，是否需要如果是，那么为什么以及如何计算这些路径，请帮助

在我尝试过的地方：

<!doctype html>
<html>
    <head>
        <title>SVG POC</title>
        <style type="text/css">
            a {
                display: inline-block;
            }
            .ico {
                background: transparent url('icons.svg') 0 0 no-repeat; 
                display: inline-block;
            }
            .ico-hotel {
                background-position: 0 0;
                height: 20px;
                width: 20px;
            }
        </style>
    </head>
    <body>          
        <a href="#"><span class="ico ico-hotel"></span></a>     
    </body>
</html>

Answer 1

您的路径已在svg文件

中定义

在svg中设置宽度和高度，它应该有效：

添加width="86px" height="20px"

<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="86px" height="20px"
     viewBox="0 0 389.4 91.3" enable-background="new 0 0 389.4 91.3" xml:space="preserve">

如何在CSS中使用SVG精灵

1 个答案: