SVG& Spritesheets [英] SVG & Spritesheets

问题描述

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

Is this combination possible? I have a retro-style spritesheet, however I'd like to use SVG with it in order to apply some effects such as shadows, outlines, and other things. Don't question it.

我知道canvas是另一种选择，但是对于这个项目，我更喜欢使用SVG。然而，一个主要问题是：从spritesheet中获取单个精灵。此外，我使用1x1像素精灵，但扩大spritesheet通过隐藏的画布使它们6x6，所以我也使用图像元素，而不是链接到页面外的图像。

I know canvas is an alternative, however for this project I'd prefer to use SVG. One major issue is in the way, however: taking individual sprites from a spritesheet. Additionally, I use 1x1 pixel sprites but enlarge the spritesheet to make them 6x6 via hidden canvas, so I'm also working with an image element as opposed to linking to an image outside of the page.

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

Is it possible to choose regions of the image to use in SVG? The SVG image element doesn't appear to offer such options.

推荐答案

你可以使用剪切路径与您的图像，完全剪切到您想要的内容。例如：

http://phrogz.net/svg/image- spritesheet.svg

如果你，您可以使用： image-spritesheet-simple.svg

You can use a clipping path with your image, clipping exactly to the contents you want. For example:
http://phrogz.net/svg/image-spritesheet.svg
If you're only targeting Firefox, you can instead use: image-spritesheet-simple.svg

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

Alternatively, you can place your <image> in a new <svg> element inside your SVG. The inner <svg> establishes a new viewport, and you can then use the viewBox of that to only display a rectangular region from your image (more like a normal sprite sheet).

这篇关于SVG& Spritesheets的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！