div边框上的SVG clipPath

Question

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

带SVG路径的div片段

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

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