Разное масштабирование двух частей логотипа на веб-странице ⇐ Html

[Anonymous]

На нашей веб-странице есть логотип, который состоит из двух частей: «пятна» и «луча». В настоящее время это один файл SVG, подобный следующему:

Код: Выделить всё

Он загружается как и имеет ширину: 100%. На широких экранах он занимает слишком много места по вертикали.
Я хотел бы масштабировать две части логотипа по-разному: пятно нужно масштабировать пропорционально, до заданного размера по вертикали, а луч нужно масштабировать по горизонтали, чтобы заполнить остальную ширину страницы.
Как добиться такого вида? Должен ли я использовать встроенный с viewBox и saveAspectRatio, установленными по-разному для вложенных элементов , или есть более простые способы достижения желаемой цели?
Это должно работать в Firefox ≥52 и современных версиях браузеров на базе Chromium и Safari.

Подробнее здесь: https://stackoverflow.com/questions/797 ... a-web-page