SVG & Spritesheets

Question

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

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

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

Answer 1

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

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