Изображение SVG как шаблон – полная ширина – сохранить соотношение ⇐ CSS

[Anonymous]

Я хотел бы создать разделитель такого типа:





Но у меня не получается, изображение никогда не растягивается полностью, не деформируется и не представляет собой узор...

SVG форма:

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

Шаблон SVG (пробный вариант):

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

https://jsfiddle.net/Bucky208/b3jhsem4/

Это с Clippath (не поддерживается в Edge и IE?!), а также растягивается на полную ширину:

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

 

.st0{clip-path:url(#SVGID_2_);}

https://jsfiddle.net/Bucky208/3xvh8kn1/1/

Цель:

• 100% ширина
• Изображение не деформируется
• Ширина самой фигуры
  может деформироваться (фиксированная высота)

С уважением

Подробнее здесь: https://stackoverflow.com/questions/508 ... keep-ratio