Тема справедлива так же для растягивания ширины при неизменной высоте. На самом деле задача немного специфичная, ведь зачем сознательно искажать картинку/иконку, тем не менее случаи бывают разные. В моем случае нужно было сделать блок, который при наличии контента растягивался бы по высоте и его “уголок” был адаптивным. Саму рабочую конструкцию вставлять не буду, т.к. запись не об этом, а о самом вопросе растягивания 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”