SVG图形中的PNG精灵表

Question

我有这个带有规则间隔精灵的PNG文件，我想在我的Web应用程序中使用它来使用SVG进行可视化。当然，我可以使用浮动元素覆盖SVG文档并执行ol-good

<img style="width: 32px; height: 32px; background: url(sprites.png) 0 0;"/>

但是单独处理SVG和HTML叠加会很麻烦。

使用相同的png spritesheet在SVG文档中显示栅格图标的SVG标记是什么？

Answer 1

以下示例说明如何将SVG裁剪应用于PNG图像以裁剪它以仅显示所选帧：http://jsfiddle.net/passiday/trke6nou/

// See the Sprite class in JSFiddle
var bird = new Sprite({
  stage      : "stage",
  id         : "bird",
  href       : "http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/07/1406635974jay.png",
  imageWidth : 329,
  imageHeight: 300,
  frames     : 8,
  tileCols   : 3,
  tileWidth  : 110,
  tileHeight : 100
});
bird.set(frame, x, y);