Блог

В настоящее время я пытаюсь разделить спрайтовый лист .svg на отдельные спрайты. Svg-лист-это один svg-лист, а не несколько объединенных svg-файлов. Я первоначально попытался сделать это с помощью файла .png, и он правильно выделил первое изображение на листе спрайта. При переключении на версию svg теги ширины и высоты теперь представляют различные свойства.

.png = размер окна просмотра на листе спрайта

.svg = размер всего листа спрайта

 <span class="Lettuce"> </span>

.Lettuce {
  display: inline-block;
  width: 512px;
  height: 512px;
  background: url(Ingredients.svg) 0 0;
}
 

Я просто пытаюсь отобразить отдельные спрайты листа спрайтов и масштабировать их с разрешения 12×12, поэтому я открыт для другого подхода. Я не пытаюсь отобразить анимацию.

Если изображения успешно изолированы, есть ли способ масштабировать их за пределами идентификатора, например, масштабировать с помощью окружающего div или класса.

Редактировать: Это то, что я получаю с помощью реализации файла .svg .svg

Это то, что я получаю с помощью .png файла .png.

Примечание: ширина/высота установлены на 12 пикселей для. png и 512 для .svg. Причина указана сверху.

Я хотел бы получить результат .png, но для увеличения размера изображения с 12 пикселей до примерно 200 пикселей без проблем с масштабированием, поэтому я пытаюсь использовать .svg.