时间戳

首页 > 解决方案 > div 边框上的 SVG clipPath

html - div 边框上的 SVG clipPath

问题描述

我正在尝试让 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>

不过，它给了我一个完全不同的结果。以下是代码的 Plunker：

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

谢谢 ：）

标签： htmlsvg

解决方案

我想到了。最初和上面的 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

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

推荐阅读