SVG 和精灵表

Posted 2023-03-25

【中文标题】SVG 和精灵表

【英文标题】：SVG & Spritesheets

【发布时间】：2012-03-13 22:14:24

【问题描述】：

这种组合可能吗？我有一个复古风格的 spritesheet，但是我想使用 SVG 来应用一些效果，例如阴影、轮廓和其他东西。不要质疑它。

我知道画布是一种替代方案，但是对于这个项目，我更喜欢使用 SVG。然而，一个主要问题是：从 spritesheet 中获取单个 sprite。此外，我使用 1x1 像素精灵，但通过隐藏画布放大精灵表以使其成为 6x6，因此我还使用图像元素，而不是链接到页面外部的图像。

是否可以选择要在 SVG 中使用的图像区域？ SVG 图像元素似乎不提供此类选项。

【参考方案1】：

您可以将clipping path 与您的图像一起使用，精确剪裁为您想要的内容。例如：http://phrogz.net/svg/image-spritesheet.svg如果您是 only targeting Firefox，则可以改用：image-spritesheet-simple.svg

或者，您可以将 <image> 放在 SVG 内的新 <svg> 元素中。内部的<svg> 建立了一个新的视口，然后您可以使用其中的viewBox 仅显示图像中的一个矩形区域（更像是一个普通的精灵表）。

【讨论】：

@Ruffy 我在网上放了一个前者的例子；查看我的编辑。