Как адаптировать длину svg?

Question

[partyzanx]

Нужно, чтобы в мобильном дизайне input и svg при активации поиска имели длину 100vw - 170px
Помогите, пожалуйста.

К input указать длину не проблема, а вот svg при этом не растягивается и конструкция нарушается.

Answer 1

[RAX7]

Можно разделить svg на саму иконку и подчеркивающую линию и по отдельности их анимировать.
Для svg с линией задать preserveAspectRatio="none" чтобы ее можно было растянуть на весь контейнер.

Comments

[partyzanx]

видны разрывы) начальная анимация хромает - присутствует линия внизу...

[RAX7]

partyzanx, ну разрывы можно подогнать, я в файрфоксе вижу что там 1px не хватает
.searchicon input+div svg.line {right: 24px;}
С анимацией тоже можно поиграть=)