Как установить ширину и высоту svg-фона элемента, импортируемого пакетом gpm-svg-sprite? - PullRequest
Новая
       23

Как установить ширину и высоту svg-фона элемента, импортируемого пакетом gpm-svg-sprite?

0 голосов
/ 04 июля 2019

Для моего проекта (веб-сайта) я использую пакет NPM с именем gulp-svg-sprite, который помещает все мои SVG-изображения в один файл sprites.svg и создает файл sprites.css.

In sprites.CSS, есть классы CSS, для которых background-image свойство установлено на изображение svg внутри sprite.svg.

sprites.css: 

.icon:before {
    content: ' ';
    vertical-align: middle;
    display: inline-block;
    background-image: url(/img/sprite.svg);
    background-repeat: no-repeat;
    background-size: 71.7em 114.4em;
}
.icon.icon-logo:before {
    background-position: 0em -98.5em;
    width: 42.4em;
    height: 8.6em;
}

Отображение желаемогоИзображение SVG в index.html : 

<span class="icon icon-logo"></span>

Проблема : фоновое изображение SVG слишком большое

Попытка решитьпроблема - пытается изменить его размер, но он не работает:

index.html: 

<style>
  .icon-logo:before {
     width: 130px;
     height: auto;
  }
</style>

1 Ответ

0 голосов
/ 04 июля 2019

Поскольку ваши спрайты используют em единицы для определения размера и позиционирования, вам нужно изменить font-size вместо width и height, например. : 

.icon-logo:before {
     font-size:.8em;
  }
...