CSS clip-path 与简单的 SVG path绘制规则

clip-path

用于定义一个剪切路径，该路径将被用来裁剪元素的可见部分。在 clip-path 属性中，我们可以使用各种形状、路径和图像来定义剪切路径。

以下是一些常见的 clip-path 属性值：

• inset():创建一个内部剪切区域，该区域包含元素的内容，但不包括任何边框或外边距。
• circle():创建一个圆形剪切区域，该区域包含元素的内容，但不包括任何边框或外边距。
• polygon():创建一个多边形剪切区域，该区域包含元素的内容，但不包括任何边框或外边距。多边形由一系列坐标点组成。
• rectangle():创建一个矩形剪切区域，该区域包含元素的内容，但不包括任何边框或外边距。矩形由左上角和右下角的坐标点定义。
• url():使用图像作为剪切路径。图像必须与元素具有相同的尺寸。
• ellipse():定义一个椭圆（使用两个半径和一个圆心位置）
• path(): 定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。

语法:

/* Keyword values */
clip-path: none;

/* <clip-source> values */
clip-path: url(resources.svg#c1);

/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;

SVG path

path元素用于定义矢量图形的路径。它由一系列命令和参数组成，每个命令都描述了图形的一个部分。
以下是一些常见的 SVG path 命令:

1. M:移动到指定点。
2. L:从当前位置画一条直线到指定点。
3. C:绘制一个圆弧。
4. Q:绘制一个二次贝塞尔曲线。
5. Z:关闭当前路径并返回到起始点。
6. H:绘制一条水平线。
7. V:绘制一条垂直线。
8. S:绘制一个二次贝塞尔曲线的平滑端点。
9. A:绘制一个椭圆弧。
10. T:绘制一个二次贝塞尔曲线的顶点。
11. R:绘制一个圆弧。
12. F:绘制一个二次贝塞尔曲线的控制点。
    以下是一个示例代码，其中我们使用 SVG path 元素来绘制一个简单的箭头形状：

<svg width="200" height="200">
   <path d="M50, 0 L100,45 L85,45 L50,15 L15,45 L0,45 Z" fill="cadetblue"/>
</svg>

在上面的代码中，我们创建了一个 SVG 元素，并在其中添加了一个 path 元素。该元素的 d 属性定义了路径的形状。在这个例子中，路径由三个命令组成：

1. M50,0:将画笔移动到坐标 (50,0)。
2. L100,45:从当前位置画一条直线到坐标 (100,45)。
3. L85,45:从当前位置画一条直线到坐标 (85,45)。
   ....
   n. Z:关闭路径并返回到起始点。
   最后，我们使用 fill 属性将路径填充为绿色。
   
   多画几次就能得到重复的箭头：

    <svg width="200" height="200">
      <path d="M50, 0 L100,45 L85,45 L50,15 L15,45 L0,45 M50, 55 L100,100 L85,100 L50,70 L15,100 L0,100 M50, 110 L100,155 L85,155 L50,125 L15,155 L0,155 Z" fill="cadetblue"/>
    </svg>

如图：