SVG & Spritesheets

Question

Возможна ли эта комбинация?У меня есть таблица спрайтов в стиле ретро, ​​однако я бы хотел использовать SVG с ней, чтобы применять некоторые эффекты, такие как тени, контуры и другие вещи.Не сомневайтесь.

Я знаю, что canvas - альтернатива, однако для этого проекта я бы предпочел использовать SVG.Однако на этом пути стоит одна важная проблема: удаление отдельных спрайтов из таблицы спрайтов.Кроме того, я использую спрайты 1x1 пикселей, но увеличиваю таблицу спрайтов, чтобы сделать их 6x6 через скрытый холст, поэтому я также работаю с элементом изображения, а не со ссылкой на изображение вне страницы.

Возможно ли этовыбрать области изображения для использования в SVG?Элемент изображения SVG не предлагает такие опции.

Answer 1

Вы можете использовать обтравочный контур с вашим изображением, точно обрезая содержимое, которое вы хотите.Например:
http://phrogz.net/svg/image-spritesheet.svg
Если вы ориентированы только на Firefox , вместо этого вы можете использовать: image-spritesheet-simple.svg

Кроме того, вы можете поместить <image> в новый элемент <svg> внутри SVG.Внутренний <svg> устанавливает новый видовой экран, и затем вы можете использовать viewBox этого для отображения только прямоугольной области на вашем изображении (больше похоже на обычный лист спрайтов).