SVG 中基于路径边界的动态百分比裁剪教程

本文详解如何使用 `clippathunits="objectboundingbox"` 实现对 svg 单个 `` 元素的独立、响应式百分比裁剪，使裁剪区域始终相对于目标路径自身边界盒（而非整个 svg 画布）进行计算。

在 SVG 开发中，若需对特定 <path>（如 ID 为 path-level 的图形）按百分比动态裁剪（例如只显示底部 90%、隐藏顶部 10%），直接使用绝对坐标或 userSpaceOnUse 单位的 <clipPath> 会导致裁剪失效——因为其坐标系绑定于整个 SVG 根容器，无法随目标路径的位置、缩放或变换而自适应。

正确解法是启用 objectBoundingBox 坐标系：它将目标元素（被裁剪的 <path>）的边界盒（bounding box）标准化为单位正方形 [0, 0] 到 [1, 1]。此时所有裁剪形状的坐标与尺寸均以该路径自身的宽高为基准（x=0 表示左边缘，y=0 表示上边缘，width=1 表示完整宽度，height=0.1 表示高度的 10%）。

✅ 正确实现步骤

1. 为 <clipPath> 显式声明 clipPathUnits="objectBoundingBox"（默认为 userSpaceOnUse）；
2. 在 <clipPath> 内使用归一化坐标（0–1 范围），无需关心原始路径的实际坐标；
3. 将 clip-path 属性绑定到目标 <path> 元素（如 clip-path="url(#cut-off-bottom)"）。

以下为关键代码片段（已优化可读性）：

BiLin AI

免费的多语言AI搜索引擎

下载

<clipPath id="cut-off-bottom" clipPathUnits="objectBoundingBox">
  <!-- 裁剪掉底部 10%：即保留 y=0 到 y=0.9 的区域 -->
  <rect x="0" y="0" width="1" height="0.9" />
</clipPath>

<!-- 应用到指定路径 -->
<path
  fill="#96d48d"
  d="M 50,96.518 11.557,58.073 V 6.195 L 16.05,4.894 ... v 51.878 z"
  id="path-level"
  clip-path="url(#cut-off-bottom)" />

? 提示：若需「裁掉顶部 10%」，可改用 <rect x="0" y="0.1" width="1" height="0.9" />；若需「仅显示中间 50%」，则设 y="0.25" height="0.5"。

⚠️ 注意事项

• objectBoundingBox 仅对被裁剪元素的 几何边界盒（getBBox()）生效，不包含 stroke、transform 或非渲染属性影响；
• 若路径含 transform（如缩放/旋转），其 getBBox() 已自动计入变换结果，因此 objectBoundingBox 仍准确；
• 动态 JS 控制时，可直接修改 <clipPath> 内 <rect> 的 height 或 y 属性实现百分比驱动裁剪：

  const clipRect = document.querySelector('#cut-off-bottom rect');
  clipRect.setAttribute('height', '0.85'); // 显示 85%
  clipRect.setAttribute('y', '0.15');       // 裁去顶部 15%

通过 objectBoundingBox，你无需手动计算路径位置、解析 path 数据或监听重绘事件——SVG 渲染引擎会自动完成坐标映射，真正实现“所见即所裁”的精准控制。