我正在我的元素中尝试 SVG sprite，但它没有按预期工作，该 sprite 包含三个图像，如下所示:
当我在 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>
最佳答案
你的路径已经在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 - 如何在 CSS 中使用 SVG Sprite ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24757311/