如何利用HTML SVG clipPath实现复杂图形裁剪效果？

本文共计949个文字，预计阅读时间需要4分钟。

直接把代码块内容输出：

原因在于：SVG 规范要求可复用资源（如 <clipPath>、<mask>、<pattern>）必须声明在 <defs> 容器内，才能被后续元素通过 url(#id) 正确引用。

• <defs> 不渲染自身内容，只提供定义；它的位置可以放在 <svg> 开头或结尾，只要在引用前已解析即可
• ID 必须全局唯一；如果多个 SVG 共存，重复 ID 会导致后加载的覆盖前一个，裁剪错乱
• 引用时写法固定为 clip-path="url(#myClip)"，少一个 url() 或漏掉 # 都无效

clipPathUnits 默认是 userSpaceOnUse，但多数响应式场景该设成 objectBoundingBox

默认情况下，<circle cx="50" cy="50" r="20"> 里的数值是按 SVG 画布像素算的，跟目标元素尺寸无关。一旦目标缩放或宽高比变化，裁剪区域就“偏了”。

想让裁剪形状随目标等比缩放，必须显式设置：clipPathUnits="objectBoundingBox"。