SVG clipPath на границе раздела

Question

Я пытаюсь заставить границу div следовать шаблону SVG, выполняя следующий ответ для SO:

Обрезать div с путем SVG

У меня есть следующий HTML:

<div class="container">
  <svg height="850px" width="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <clipPath id="svgPath" >
          <path style="stroke: none; fill: red" id="arrow" d="M 50 0 C 10 150 80 130 50 170 C 10 260 80 220 50 310 C 10 420 80 380 50 510 C 50 520 80 500 50 600 C 10 700 80 680 50 720 C 10 800 80 780 50 830 " />
          </clipPath> 
        </defs>
        <rect width="100%" height="100%" fill="green" clip-path="url(#svgPath)" />
      </svg>
</div>

Это дает мне совсем другой результат.Ниже приведен код Plunker:

https://next.plnkr.co/edit/SfthJz3UwQPAKkgb?open=lib%2Fscript.js&preview

Спасибо:)

Answer 1

Я понял это.Первоначально, как и в случае с Plunker выше, он превращал черту в странную фигуру следующим образом:

Выше приведен этот Plunker: https://next.plnkr.co/edit/SfthJz3UwQPAKkgb?open=lib%2Fscript.js&preview

Тем не менее, это в основном добавление Z в конце SVG, так что это повторное подключение к началу.Затем я понял, что на самом деле нужно иметь точки, которые бы определяли прямоугольник, а одна из сторон - быстрая линия.Поэтому я добавил две дополнительные точки в верхнем левом и нижнем левом углу в начале и конце SVG.

Плункер с рабочим примером:

https://next.plnkr.co/edit/CjNqIDcEFcri4S7K?open=lib%2Fscript.js

(Это не модно, но работает для визуализации, если кто-то наткнулся на это)