clipPath必须定义在内才能生效，否则浏览器静默忽略；ID需唯一，引用格式为clip-path="url(#id)"，且推荐设clipPathUnits="objectBoundingBox"实现响应式裁剪。
clipPath 必须定义在 <defs></defs> 里，否则不生效
直接把 <clippath></clippath> 写在 <svg></svg> 根标签下但不在 <defs></defs> 中，多数浏览器会忽略它——不是报错，而是静默失效。这是最常被卡住的第一步。
原因在于：SVG 规范要求可复用资源（如 <clippath></clippath>、<mask></mask>、<pattern></pattern>）必须声明在 <defs></defs> 容器内，才能被后续元素通过 url(#id) 正确引用。
-
<defs></defs>不渲染自身内容，只提供定义；它的位置可以放在<svg></svg>开头或结尾，只要在引用前已解析即可 - ID 必须全局唯一；如果多个 SVG 共存，重复 ID 会导致后加载的覆盖前一个，裁剪错乱
- 引用时写法固定为
clip-path="url(#myClip)"，少一个url()或漏掉#都无效
clipPathUnits 默认是 userSpaceOnUse，但多数响应式场景该设成 objectBoundingBox
默认情况下，<circle cx="50" cy="50" r="20"></circle> 里的数值是按 SVG 画布像素算的，跟目标元素尺寸无关。一旦目标缩放或宽高比变化，裁剪区域就“偏了”。
想让裁剪形状随目标等比缩放，必须显式设置：clipPathUnits="objectBoundingBox"。这时所有坐标变成 0–1 范围：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
cx="0.5" cy="0.5" r="0.3"= 居中、半径占目标宽高中较小值的 30% -
<polygon points="0,0 1,0 1,1"></polygon>= 左上→右上→右下三角形，始终贴目标边界 - 注意：此时不能混用像素值，
cx="50"在objectBoundingBox下会被当 50 倍单位处理，结果异常
用 <path></path> 写复杂裁剪时，clip-rule 决定“挖空”还是“叠加”
单个 <path></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 写 <code>clip-path: url(#myClip) 看似方便，但要注意：
- Safari 直到 2026 年仍不支持对 HTML 元素使用
url()引用 SVG<clippath></clippath>，仅支持内联path()或circle()等函数语法 - Firefox 对跨 iframe 的
url(#id)引用有限制，ID 必须在同一文档上下文 - 若 SVG 是外链或
<img src="icon.svg">方式引入，则内部<clippath></clippath>完全不可被外部 CSS 引用——必须内联 SVG 代码
真正稳定的做法：把 SVG 内联进 HTML，<defs></defs> 放在顶部，再用 CSS 或 SVG 属性统一引用。任何试图绕过内联去“复用外部 SVG 的 clipPath”的方案，在生产环境大概率翻车。
