Я пытаюсь использовать символы SVG, как описано в этой статье о трюках CSS , но получаю пробел слева и справа вокруг SVG, а его ширина составляет 300px в ширину.
Я хочу, чтобы SVG заполнял всю ширину контейнера. Добавление width: 100% в SVG не помогает.
Я сделал кодовую ручку , чтобы объяснить, что происходит. Первый пример показывает проблему.
Добавление атрибута viewBox исправляет проблему во втором примере, но это не идеально, потому что я генерирую символ SVG из папки SVG с помощью веб-пакета. Таким образом, информация viewBox должна копироваться / вставляться каждый раз, когда я ссылаюсь на SVG в HTML. Это не идеально, если учесть, что другие люди могут захотеть отредактировать SVG позже и могут не осознавать, что им нужно вручную обновлять информацию viewBox в HTML, что приведет к появлению неправильных значков.
Это стало бы таким громоздким, как необходимость явно добавлять размеры изображения ко всем тегам <img>. Не отличная ситуация!
Есть ли другой способ исправить это, не добавляя атрибут viewBox?!