image - SVG 和精灵表

Question

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

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

是否可以选择要在 SVG 中使用的图像区域？SVG 图像元素似乎没有提供这样的选项。

Answer 1

您可以对图像使用剪切路径，精确剪切到您想要的内容。例如：
http ://phrogz.net/svg/image-spritesheet.svg
如果您只针对 Firefox，您可以改用：image-spritesheet-simple.svg

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