Question

我找到了一张包含所有52张扑克牌的华丽免费SVG文件。

我想在基于网络的游戏中使用它来显示卡片的精灵。

我可以使用css将此文件“拆分”为图标吗？

我试过跟this tutorial但是需要编辑SVG文件来定义def标签内的元素，我宁愿避免（SVG很大：2MB）。

我也尝试过使用viewbox / viewport属性但没有成功。

注意：我还发现了一个cards font，但渲染质量却差得多......

Answer 1

这是一个简单的建议，其中background-position用于将图像的所需区域移动到视图中

div {
  display: inline-block;
  border: 1px solid;
  height: 355px;
  width: 260px;
  background-image: url(https://cdn.rawgit.com/tyrcho/fa8bec7cc670515cd250a9dcfad5898f/raw/2d6bb400ab12bf785a29ba06202cbec789617801/Color_52_Faces_v.2.0.svg);
}
.div1 {
  background-position: -490px -1155px;
}
.div2 {
  background-position: -490px -1530px;
}

<div class="div1"></div>
<div class="div2"></div>

用任意SVG文件制作精灵

1 个答案: