如何利用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"。这时所有坐标变成 0–1 范围：

立即学习“前端免费学习笔记（深入）”；

• cx="0.5" cy="0.5" r="0.3" = 居中、半径占目标宽高中较小值的 30%
• <polygon points="0,0 1,0 1,1"> = 左上→右上→右下三角形，始终贴目标边界
• 注意：此时不能混用像素值，cx="50" 在 objectBoundingBox 下会被当 50 倍单位处理，结果异常

用 <path> 写复杂裁剪时，clip-rule 决定“挖空”还是“叠加”

单个 <path> 没问题，但放两个以上图形（比如外圆+内圆做环形），默认按 non-zero 规则渲染——可能整个都显示，而不是你想要的“中间镂空”。

这时候得靠 clip-rule="evenodd" 切换奇偶规则：

• 两个同心圆：外圆顺时针、内圆逆时针 + clip-rule="evenodd" → 只保留环形区域
• 星形轮廓包着一个矩形 → 加 clip-rule="evenodd" 可让矩形区域变透明（即“扣掉”）
• 不设 clip-rule 时，浏览器按 non-zero 行为，路径方向影响填充判断，调试困难

CSS 的 clip-path: url(#id) 和 SVG 内部用法行为一致，但兼容性有坑

对 HTML 元素（比如 <img> 或 <div>）用 CSS 写 clip-path: url(#myClip) 看似方便，但要注意：

• Safari 直到 2026 年仍不支持对 HTML 元素使用 url() 引用 SVG <clipPath>，仅支持内联 path() 或 circle() 等函数语法
• Firefox 对跨 iframe 的 url(#id) 引用有限制，ID 必须在同一文档上下文
• 若 SVG 是外链或 <img src="icon.svg"> 方式引入，则内部 <clipPath> 完全不可被外部 CSS 引用——必须内联 SVG 代码

真正稳定的做法：把 SVG 内联进 HTML，<defs> 放在顶部，再用 CSS 或 SVG 属性统一引用。任何试图绕过内联去“复用外部 SVG 的 clipPath”的方案，在生产环境大概率翻车。