SVG 的 clip-path 通过定义可见区域裁剪元素，需在 中用 定义图形（如 circle、rect），再以 clip-path="url(#id)" 引用；默认坐标系为 userSpaceOnUse，支持多图形并集裁剪。
SVG 的 clip-path 通过定义一个可见区域，让目标元素只在该区域内显示，区域外的部分被“裁掉”。用 XML 方式实现，核心是：先定义一个 clip-path 属性引用它。
定义 clipPath 并引用
必须把裁剪路径写在 url(#id) 指向它。路径可以是
- 目标元素加上
clip-path="url(#myClip)" - 注意：clipPath 坐标系默认和被裁剪元素的用户坐标系对齐（不是整个 SVG 的绝对坐标）
常见形状裁剪示例
矩形裁剪最常用，适合做头像框、卡片圆角等；圆形适合头像；多边形可做三角、六边形等异形裁剪。
- 圆角矩形裁剪：
- 六边形裁剪：
- 引用时确保被裁元素尺寸和位置与 clipPath 内部图形逻辑匹配，否则可能裁空或只露一角
注意坐标系与单位问题
clipPath 默认使用对象边界盒（objectBoundingBox）还是用户坐标系，取决于 clipPathUnits 属性。默认是 userSpaceOnUse，即按 SVG 当前坐标系理解数值；设为 objectBoundingBox 时，数值是相对被裁元素宽高的比例（0–1）。
- 例如：
- 混用单位易出错，建议统一用
userSpaceOnUse（默认），明确控制像素位置 - 若被裁元素有
transform，clipPath 不会自动跟随变换，需手动同步或把 transform 移到 group 外层
组合与复用技巧
一个
- 两个圆叠加裁剪：
- 想取交集？不行 —— clipPath 只支持并集；如需交集，得用
- 避免在 clipPath 里用滤镜、渐变等效果，它们会被忽略
