nodejs29 (UI相关) : CSS 剪辑路径clip-path 绘制多边形+不规则形状+交互式开发人员工具

本文链接：https://blog.csdn.net/ResumeProject/article/details/144011126

clip-path语法

clip-path语法 : https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

使用基本几何形状来定义剪裁路径

/* === <basic-shape> 值 === */
/*在进行剪裁时需要注意，原始的高宽要大于剪裁的值，否则就显示为空了*/
/* 使用一个内嵌矩形进行剪裁，定义上、右、下、左的偏移量。如clip-path: inset(100px 50px 20px 30px);，下边的示例是简写方法 */
clip-path: inset(100px 50px); /* 等于 inset(100px 50px 100px 50px) */
clip-path: inset(0 round 20px); /* 设置圆角矩形 */

/* 使用一个圆形进行剪裁，定义半径和位置。 */
clip-path: circle(50px at 0 100px);

/* 使用一个椭圆进行剪裁，定义横轴和纵轴半径及位置。 */
clip-path: ellipse(50px 60px at 10% 20%);

/* 使用多边形进行剪裁，通过一系列 (x, y) 坐标点定义路径。比如50% 0%就是在顶部中心 */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* 使用自定义路径（基于 SVG 的路径语法）进行剪裁。 */
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"
);

/* 使用一个矩形进行剪裁，可选地定义圆角。 */
clip-path: rect(5px 5px 160px 145px round 20%);

/* 使用 x, y, 宽度和高度定义的矩形进行剪裁，并可选设置圆角半径。 */
clip-path: xywh(0 5px 100% 75% round 15% 0);

/* === 盒模型与形状结合使用 === */
/* 将几何盒与基本形状结合，进行更精确的剪裁。 */
clip-path: padding-box circle(50px at 0 100px);

面向对象全局值

/* 继承父元素的 `clip-path` 值。 */
clip-path: inherit;
/* 将 `clip-path` 属性重置为默认值（`none`）。 */
clip-path: initial;
/* 将 `clip-path` 属性回退到无本地覆盖的值。 */
clip-path: revert;
/* 在当前层级中回退到原始的 `clip-path` 值。 */
clip-path: revert-layer;
/* 根据上下文，将 `clip-path` 属性重置为继承值或默认值。 */
clip-path: unset;

移除任何现有的剪裁路径，允许元素完全显示

clip-path: none;

引用一个外部的 SVG 文件或片段来定义剪裁路径

clip-path: url(resources.svg#c1);

使用盒模型的区域来定义剪裁路径

/* === <geometry-box> 值 === */
/* 将元素剪裁到其外边距盒（margin box）。 */
clip-path: margin-box;
/* 将元素剪裁到其边框盒（border box，默认值）。 */
clip-path: border-box;
/* 将元素剪裁到其内边距盒（padding box，不包括边框）。 */
clip-path: padding-box;
/* 将元素剪裁到其内容盒（content box，不包括内边距和边框）。 */
clip-path: content-box;
/* 将元素剪裁到其填充区域（适用于 SVG 元素）。 */
clip-path: fill-box;
/* 将元素剪裁到其描边区域（适用于 SVG 元素）。 */
clip-path: stroke-box;
/* 将元素剪裁到 SVG 的视图框区域（如果有定义）。 */
clip-path: view-box;

编辑svg然后使用path(基本几何形状)导入到css

https://yqnn.github.io/svg-path-editor/
点击蓝色加号添加点或者线（或复制其他svg的路径数据，如https://jxnblk.io/paths）
点击可以调整区域，拖动点和线，选择旁边的转换点：
导出绘制结果（还可将 SVG 绝对剪辑路径转换为相对）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="8 12 48 39.66">
	<path d="M 8 48 C 27 59 37 41 56 48 L 32 12 L 18 23 Z M 8 21 L 18 23" fill="#000000"/>
</svg>

注：位置也比较重要，路径坐标定义使用负值，可能超出容器的可视范围。

SVG 转为 CSS

clip-path 支持 path() 函数，可以直接将 SVG 的路径信息嵌入到 CSS 中。

在这里插入图片描述

代码

<div class="svg-shape"></div>

.svg-shape {
  width: 100px;
  height: 100px;
  background-color: black;
  clip-path: path('M 8 48 C 27 59 37 41 56 48 L 32 12 L 18 23 Z M 8 21 L 18 23');
}