SVG的clip-path怎么用 XML实现元素裁剪

SVG 的 clip-path 通过定义可见区域裁剪元素，需在 中用 定义图形（如 circle、rect），再以 clip-path="url(#id)" 引用；默认坐标系为 userSpaceOnUse，支持多图形并集裁剪。

SVG 的 clip-path 通过定义一个可见区域，让目标元素只在该区域内显示，区域外的部分被“裁掉”。用 XML 方式实现，核心是：先定义一个 元素（通常放在 中），再用 clip-path 属性引用它。

定义 clipPath 并引用

必须把裁剪路径写在 里，再用 url(#id) 指向它。路径可以是 、、、 等任意 SVG 图形，图形内部即为可见区。

• 目标元素加上 clip-path="url(#myClip)"
• 注意：clipPath 坐标系默认和被裁剪元素的用户坐标系对齐（不是整个 SVG 的绝对坐标）

常见形状裁剪示例

矩形裁剪最常用，适合做头像框、卡片圆角等；圆形适合头像；多边形可做三角、六边形等异形裁剪。

• 圆角矩形裁剪：
• 六边形裁剪：
• 引用时确保被裁元素尺寸和位置与 clipPath 内部图形逻辑匹配，否则可能裁空或只露一角

注意坐标系与单位问题

clipPath 默认使用对象边界盒（objectBoundingBox）还是用户坐标系，取决于 clipPathUnits 属性。默认是 userSpaceOnUse，即按 SVG 当前坐标系理解数值；设为 objectBoundingBox 时，数值是相对被裁元素宽高的比例（0–1）。

• 例如： 表示以元素中心为圆心、半径为宽度 40% 的圆
• 混用单位易出错，建议统一用 userSpaceOnUse（默认），明确控制像素位置
• 若被裁元素有 transform，clipPath 不会自动跟随变换，需手动同步或把 transform 移到 group 外层

组合与复用技巧

一个 可被多个元素引用；也可在 clipPath 内部嵌套多个图形，它们按布尔“并集”方式合并（即任意一个图形覆盖的区域都可见）。

• 两个圆叠加裁剪： → 类似“8”字形可见区
• 想取交集？不行 —— clipPath 只支持并集；如需交集，得用 配合 alpha 通道
• 避免在 clipPath 里用滤镜、渐变等效果，它们会被忽略