Тема справедлива так же для растягивания ширины при неизменной высоте. На самом деле задача немного специфичная, ведь зачем сознательно искажать картинку/иконку, тем не менее случаи бывают разные. В моем случае нужно было сделать блок, который при наличии контента растягивался бы по высоте и его «уголок» был адаптивным. Саму рабочую конструкцию вставлять не буду, т.к. запись не об этом, а о самом вопросе растягивания svg по одной из сторон, поэтому в качестве предполагаемого результат добавлю только изображение:
Кратко общими словами: конструкция состоит из прямоугольного div’a и svg — уголка справа. Так вот при первичном решении svg никак не удавалось растянуть исключительно по высоте, оставив фиксированную ширину. Решение нашлось в атрибуте:
1 |
preserveAspectRatio="none" |
указав который к тегу svg, изображением стало возможным управлять, устанавливая различную ширину и высоту картинки.
See the Pen OvZJrP by Sergey (@norzserge) on CodePen.
Надеюсь, что моя запись натолкнет кого-нибудь на решение своей не тривиальной задачи. Всем удачи!
P.S. К слову сказать, до решения с растягиванием SVG были предприняты попытки:
— добавить блок с background картинкой-уголком, но при растягивании бэкграунда, картинка заметно искажалась — fail
— нарисовать в background этот треугольник градиентом, но при растягивании сторона треугольника превращалась в лесенку — fail
— вариант с псевдо элементами подходит только при фиксированной высоте блока, в котором находится контент, так что тоже не прокатило
— еще пара извращений, о которых даже писать не хочу
В общем самым действенным оказалось использование svg с атрибутом preserveAspectRatio=»none»