clippath必须定义在内，否则静默失效；id需全局唯一且引用格式为clip-path="url(#id)"，clippathunits设为objectboundingbox可实现响应式裁剪，多图形裁剪需clip-rule="evenodd"支持镂空效果。
clipPath必须定义在里，否则不生效
直接把<clippath></clippath>写在<svg></svg>根标签下但不在<defs></defs>中，浏览器不会报错，而是静默忽略——这是最常卡住的第一步。SVG规范要求所有可复用资源（<clippath></clippath>、<mask></mask>、<pattern></pattern>）必须声明在<defs></defs>容器内，才能被clip-path="url(#id)"正确引用。
<defs></defs>不渲染自身内容，只提供定义；它可放在<svg></svg>开头或结尾，只要在引用前已解析即可。ID必须全局唯一——多个SVG共存时，重复ID会导致后加载的覆盖前一个，裁剪错乱。引用格式必须严格为clip-path="url(#myClip)"，少一个url()或漏掉#都无效。
clipPathUnits决定坐标单位，响应式场景必须设为objectBoundingBox
默认clipPathUnits="userSpaceOnUse"，意味着<circle cx="50" cy="50" r="20"></circle>里的数值是按SVG画布像素算的，跟目标元素尺寸无关。一旦目标缩放或宽高比变化，裁剪区域就“偏了”。
想让裁剪形状随目标等比缩放，必须显式设置clipPathUnits="objectBoundingBox"。这时所有坐标变成0–1范围：cx="0.5" cy="0.5" r="0.3"表示居中、半径占目标宽高中较小值的30%；<polygon points="0,0 1,0 1,1"></polygon>表示左上→右上→右下三角形，始终贴目标边界。注意：此时混用像素值（如cx="50"）会被当50倍单位处理，结果异常。
多图形组合裁剪需用clip-rule="evenodd"实现“挖空”效果
一个<clippath></clippath>可包含多个图形，默认按clip-rule="nonzero"（非零环绕规则）叠加——外圆+内圆会整个显示，而不是你想要的环形。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
要实现“镂空”，必须加clip-rule="evenodd"切换奇偶规则：
- 两个同心圆：外圆顺时针、内圆逆时针 +
clip-rule="evenodd"→ 只保留环形区域 - 星形轮廓包着一个矩形 → 加
clip-rule="evenodd"可让矩形区域变透明（即“扣掉”）
不设clip-rule时，路径方向直接影响填充判断，调试困难；且clip-rule只对<clippath></clippath>内部多个图形生效，单个图形无需设置。
SVG clipPath引用到HTML元素时，需隐藏SVG本身
把<svg></svg>内联进HTML用于定义<clippath></clippath>时，它会占据页面空间，导致布局错乱。正确做法是让SVG不可见但保留在DOM中：
- 加
style="width: 0; height: 0; position: absolute; visibility: hidden;" - 或用
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0;"></svg>
确保<defs></defs>在引用前已加载；跨iframe无法引用ID，url(#id)只在当前文档生效。复杂路径（如手绘轮廓、星形）用<path d="..."></path>写进<clippath></clippath>比硬写CSS clip-path: path("...")更可靠——后者在Safari 15.4+才支持，且DPR变化时边缘易漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
