SVG clipPath 怎样裁剪多个图形的显示范围

如果一个 SVG 画面要让圆形、矩形和路径共享同一块可见区域，最稳妥的做法是把这些裁剪形状集中放进一个 ，再让目标图形通过 clip-path 引用它。裁剪发生在绘制阶段：范围外的像素不显示，但目标元素本身的几何边界不会因此缩小。

官方参考地址：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath

下面的示例只说明结构关系，重点是“裁剪定义”和“被裁剪对象”分开维护。

把多个图形放进同一个 clipPath

clipPath 可以包含多个形状。把它放在 defs 中，再给目标分组添加 clip-path="url(#photoWindow)"，组内的多个对象就共享这套裁剪定义。

这里的“多个”是裁剪定义内部的多个几何元素，不是把多个 clip-path 属性叠加到同一个元素上。实际维护时，建议给裁剪定义一个能表达用途的 ID；目标组只负责引用，后续调整边界时不必改动每个图形。

坐标系决定裁剪范围怎样解释

clipPathUnits 默认是 userSpaceOnUse，裁剪子元素使用 SVG 当前用户坐标系。若改成 objectBoundingBox，裁剪坐标会相对于引用对象的包围盒解释，通常用 0 到 1 的归一化范围表达。

如果裁剪形状看起来偏移，先确认这三个问题：裁剪定义是否与目标对象使用同一个坐标语境；是否真的需要归一化坐标；引用对象是否有稳定的包围盒。含有复杂变换或动态尺寸的对象，优先把坐标系和变换关系写清楚，再选择单位，而不是盲目把数值改大或改小。

显示区域和交互区域不是同一件事

裁剪路径相当于引用元素的自定义视口：它限制可以绘制的区域，却不改变元素的固有几何或包围盒。这个区别会影响布局计算、后续变换以及基于边界的脚本判断。

另一个容易忽略的边界是指针事件。按照 SVG 的裁剪语义，裁剪区域之外默认不会派发 pointer-events；如果交互热区需要比视觉裁剪范围更大，应额外放置透明命中层，或把事件监听挂在没有被裁剪的容器上，不能假设看不见的部分仍然可点击。

一张表排查裁剪异常

总结一下：把多个几何形状放进同一个 clipPath，用一个稳定 ID 让目标分组引用；出现错位时优先看坐标系统；涉及点击时把视觉裁剪和交互热区分开。这样既能复用裁剪定义，也不会把显示问题误判成布局问题。

常见问题

多个裁剪形状之间是“并集”还是“交集”？

实际效果取决于 SVG 裁剪路径的组合规则和具体形状关系，不能只凭“放了多个元素”猜测。需要交付明确形状时，先用单独的几何构造表达目标区域，并把复杂组合拆成可读的定义。

clipPath 能替代 mask 吗？

不能简单互换。clipPath 适合硬边界裁剪；如果需要灰度、透明度或渐变参与可见性，应该比较 mask 的语义和实现成本。