Масштабирование < использовать>D внешние SVG с правильным соотношением сторон

Я хочу использовать (внешний) значок SVG и хочу иметь возможность стилизовать цвет заливки с помощью CSS (насколько я могу видеть, лучший способ сделать это-создать <svg><use xlink_href="…" /></svg>структуру в каждом месте, где я хочу ее использовать). Одновременно я хочу, чтобы он был масштабируемым с правильным соотношением сторон, поэтому его можно использовать вокруг различных размеров текста.

Но масштабирование с height:1.5em;width:autoAFAICS работает только тогда, когда SVG имеет a viewBox. Есть ли способ получить это поле просмотра или правильно масштабировать без него?

1 ответ

  1. Если ваш редактор SVG не добавляет aviewBox, нет простого способа получить его — кроме как самостоятельно разработать размеры и добавить его вручную.

    • Используйте считывание координат мыши в редакторе или
    • Используйте javascript и вызывайте getBBox()соответствующий элемент, или
    • Используйте метод проб и ошибок. Поиграйте с x, y, шириной и высотой итеративно, пока не сузите размеры.