SVG-иконки из спрайта не принимают заданные размеры в CSS

Question

SVG-иконки из спрайта не принимают заданные размеры в CSS

Ксения Савченко Ученик (119), на голосовании 1 месяц назад

Здравствуйте!

Я вставляю SVG-иконки через <use> из спрайта и задаю размеры в CSS, например: width: 14px; height: 14px;
Но на деле иконки отображаются с размерами 12x12.

html
Копировать код
<div class="widget__header flex">
<svg class="widget__icon">
<use xlink:href="./assets/icons.svg#current-revenue"></use>
</svg>
</div>

Фрагмент спрайта:
<symbol id="current-revenue" viewBox="0 0 14 14">...</symbol>

Почему заданные в CSS размеры не применяются? Как добиться того, чтобы размеры иконок соответствовали заданным в стилях?

Заранее благодарю за помощь!

Answer 1

Анатолий Гаджиев Мастер (1138) 2 месяца назад

поставь лайк))) коплю 1000 баллов просто..

Answer 2

Размер SVG-иконок вписан внутрь файла, как он взаимодействует с HTML и CSS не знаю (не пользовался никогда), но если изменить размер SVG файла в векторном редакторе, тогда точно все сойдется.

Answer 3

Может, в самом тэге use надо прописывать новые width и height...

Answer 4

Aac AacoB Оракул (52754) 2 месяца назад

дурам, которые банят правильные ответы, никто больше отвечать не будет!

Ксения СавченкоУченик (119) 2 месяца назад

Я никого не банила, просто отметила, что ответы мне не помогли, потому что они не решили мою проблему. Если у вас есть конструктивное предложение или пояснение, буду рада выслушать. А вот оскорблять меня незачем