clip-path 是 css 裁剪元素可视区域的属性，支持 basic-shape（如 circle、polygon）、url() 引用 svg clippath、path() 等方式；必须先在 中定义唯一 id 的 ，再用 clip-path: url(#id) 引用，且需注意 clippathunits 和 clip-rule 对坐标系与叠加逻辑的影响。
直接用 <clippath></clippath> 配合 clip-path 属性就能裁，但必须按“先定义、再引用”两步走，漏掉任意一步都会完全不生效。
clipPath 必须写在 里才能被正确引用
浏览器只认 <defs></defs> 内部定义的 <clippath></clippath>，写在外面或直接塞进 <g></g> 里都无效。ID 也必须唯一，且引用时严格用 url(#id) 语法。
-
<defs><clippath id="myClip"><circle cx="50" cy="50" r="30"></circle></clippath></defs>✅ 正确位置 -
<clippath id="myClip">...</clippath>直接放在<svg></svg>根下 ❌ 不会被识别 -
clip-path: url(#myClip);缺少url()或括号/引号 ❌ 常见拼写错误
clipPathUnits 决定坐标系是“固定像素”还是“相对缩放”
默认是 userSpaceOnUse（画布绝对坐标），但多数响应式场景需要 objectBoundingBox（0–1 归一化）。不显式设置就容易出现“裁剪区域偏移”或“缩放后裁剪失效”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 设为
clipPathUnits="objectBoundingBox"后，<circle cx="0.5" cy="0.5" r="0.3"></circle>表示居中、半径占目标宽高的 30% - 保持
userSpaceOnUse（默认）时，cx="50"指 SVG 画布上横坐标 50px 处，和目标元素尺寸无关 - 混用两种单位时，裁剪区域可能完全错位，尤其在 CSS 动态调整容器尺寸后
被裁图形必须显式声明 clip-path，不能靠父级继承
clip-path 不像 fill 那样可继承，父容器设了对子元素完全无效。每个要裁的元素都得单独加属性。
-
<g clip-path="url(#myClip)"><rect ...></rect></g>✅ 可行，但作用于<g></g>自身 -
<g><rect clip-path="url(#myClip)" ...></rect></g>✅ 推荐，明确控制单个图形 -
<g clip-path="url(#myClip)"><rect ...></rect></g>中的<rect></rect>无clip-path❌ 不会被裁
多个图形组合裁剪时，clip-rule 控制交集/并集逻辑
一个 <clippath></clippath> 里放多个形状，默认按 “nonzero” 规则叠加（通常取并集）；换成 clip-rule="evenodd" 才能实现“挖空”效果，比如环形、镂空文字。
- 两个同心圆：外圆
fill="white"+ 内圆fill="black"+clip-rule="evenodd"→ 环形可见区 - 仅用
<path></path>描述复杂轮廓时，d属性路径方向（顺时针/逆时针）也影响evenodd判定结果 - 省略
clip-rule时，浏览器按默认规则处理，不同版本渲染可能不一致
最容易被忽略的是 clipPathUnits 的隐式行为和 clip-rule 对多图形叠加的影响——它们不报错，但裁出来的东西经常和预期差很远，调试时得先盯住这两个点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
