SVG 的 clip-path 通过定义可见区域裁剪元素，需在 中用 定义图形（如 circle、rect），再以 clip-path="url(#id)" 引用；默认坐标系为 userSpaceOnUse，支持多图形并集裁剪。
SVG 的 clip-path 通过定义一个可见区域，让目标元素只在该区域内显示，区域外的部分被“裁掉”。用 XML 方式实现，核心是：先定义一个 <clippath></clippath> 元素（通常放在 <defs></defs> 中），再用 clip-path 属性引用它。
定义 clipPath 并引用
必须把裁剪路径写在 <defs></defs> 里，再用 url(#id) 指向它。路径可以是 <path></path>、<circle></circle>、<rect></rect>、<polygon></polygon> 等任意 SVG 图形，图形内部即为可见区。
<clippath id="myClip"><circle cx="50" cy="50" r="30"></circle></clippath>- 目标元素加上
clip-path="url(#myClip)" - 注意：clipPath 坐标系默认和被裁剪元素的用户坐标系对齐（不是整个 SVG 的绝对坐标）
常见形状裁剪示例
矩形裁剪最常用，适合做头像框、卡片圆角等；圆形适合头像；多边形可做三角、六边形等异形裁剪。
- 圆角矩形裁剪：
<clippath id="rounded"><rect x="10" y="10" width="200" height="100" rx="16" ry="16"></rect></clippath> - 六边形裁剪：
<clippath id="hex"><polygon points="50,0 100,25 100,75 50,100 0,75 0,25"></polygon></clippath> - 引用时确保被裁元素尺寸和位置与 clipPath 内部图形逻辑匹配，否则可能裁空或只露一角
注意坐标系与单位问题
clipPath 默认使用对象边界盒（objectBoundingBox）还是用户坐标系，取决于 clipPathUnits 属性。默认是 userSpaceOnUse，即按 SVG 当前坐标系理解数值；设为 objectBoundingBox 时，数值是相对被裁元素宽高的比例（0–1）。
- 例如：
<clippath id="bb" clippathunits="objectBoundingBox"><circle cx="0.5" cy="0.5" r="0.4"></circle></clippath>表示以元素中心为圆心、半径为宽度 40% 的圆 - 混用单位易出错，建议统一用
userSpaceOnUse（默认），明确控制像素位置 - 若被裁元素有
transform，clipPath 不会自动跟随变换，需手动同步或把 transform 移到 group 外层
组合与复用技巧
一个 <clippath></clippath> 可被多个元素引用；也可在 clipPath 内部嵌套多个图形，它们按布尔“并集”方式合并（即任意一个图形覆盖的区域都可见）。
- 两个圆叠加裁剪：
<clippath><circle cx="30" cy="50" r="20"></circle><circle cx="70" cy="50" r="20"></circle></clippath>→ 类似“8”字形可见区 - 想取交集？不行 —— clipPath 只支持并集；如需交集，得用
<mask></mask>配合 alpha 通道 - 避免在 clipPath 里用滤镜、渐变等效果，它们会被忽略
