div 边框上的 SVG clipPath答案

【问题标题】：SVG clipPath on a div borderdiv 边框上的 SVG clipPath
【发布时间】：2018-11-17 14:44:01
【问题描述】：

我正在尝试让 div 的边框遵循 SVG 的模式，通过 SO 上的以下答案：

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

谢谢:)

【问题讨论】：

预期的结果是什么？
@TemaniAfif 让 div 的边框遵循 SVG 的模式。基本上一部分是一种颜色，另一部分是另一种颜色，并由 SVG 图案分隔。
喜欢这个？ stackoverflow.com/questions/49669689/…
@TemaniAfif 是的 - 正是:)
啊，现在我明白了。 Clip-path 需要一个返回点，所以它会自动添加一个 Z，这就是它很时髦的原因。很确定如果我正确定义它会起作用。

标签： html svg

【解决方案1】：

我想通了。最初和上面的 Plunker 一样，它通过以下方式将摇摆不定的线条变成了一个奇怪的图形：

以上是这个Plunker：https://next.plnkr.co/edit/SfthJz3UwQPAKkgb?open=lib%2Fscript.js&preview

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

使用工作示例的 Plunker：

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

（它并不花哨，但如果有人偶然发现它，它可以用来可视化）

【讨论】：