div边框上的SVG clipPath

Question

我正在尝试使div的边界遵循SVG的模式，并在SO上进行以下回答：

Clip div with SVG path

我有以下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>

这给了我一个截然不同的结果。以下是该代码的简要说明：

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

但是，它基本上是在SVG的末尾添加一个Z，因此它重新连接到开始。然后我发现它实际上需要定义矩形的点，其中一侧是弯曲的线。因此，我在SVG的开头和结尾分别在左上角和左下角添加了两个点。

带有工作示例的柱塞：

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

（这不是花哨的，但可以使人发现它时的视觉效果）