如何将SVG路径作为另一SVG的视口或边界（杯装液体场景）

需求说明 #

需要将id为cup的SVG路径作为黄色液体（id为gentle-wave的SVG路径）的显示容器，限制液体仅在杯子边界内可见，即使液体动画超出杯子区域，也只显示杯内部分。

效果对比 #

当前效果 #

预期效果 #

解决方案 #

使用SVG的<clipPath>元素实现裁剪效果，将杯子路径作为裁剪区域，液体路径仅在该区域内显示。

修改后的完整代码 #

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="74.816 9.773 216.518 267.963" width="216.518" height="267.963" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义裁剪路径，复用杯子的形状 -->
  <clipPath id="cup-clip">
    <path d="M 104.816 11.024 L 263.836 9.773 C 280.405 9.773 291.334 24.455 291.334 41.024 L 259.943 250.942 C 257.98 267.511 250.611 276.282 235.534 276.282 L 139.087 277.736 C 122.818 277.736 112.515 271.916 111.215 255.347 L 74.816 41.024 C 74.816 24.455 88.247 11.024 104.816 11.024 Z"/>
  </clipPath>

  <!-- 杯子本身的显示路径 -->
  <path id="cup" d="M 104.816 11.024 L 263.836 9.773 C 280.405 9.773 291.334 24.455 291.334 41.024 L 259.943 250.942 C 257.98 267.511 250.611 276.282 235.534 276.282 L 139.087 277.736 C 122.818 277.736 112.515 271.916 111.215 255.347 L 74.816 41.024 C 74.816 24.455 88.247 11.024 104.816 11.024 Z" stroke="rgb(222, 227, 240)" strokewidth="1" style="fill: rgb(173, 173, 173);" transform="matrix(1, 0, 0, 1, 0, -7.105427357601002e-15)"/>

  <!-- 液体路径，应用裁剪限制显示范围 -->
  <path id="gentle-wave" d="M 86.759 115.641 C 105.042 107.431 75.76 124.011 111.277 98.943 C 146.794 73.875 163.342 76.758 186.793 78.455 C 210.244 80.152 243.25 87.673 259.122 101.068 C 274.994 114.463 273.667 112.514 281.515 116.703 L 256.016 272.501 L 114.383 268.251 L 86.759 115.641 Z" style="fill-rule: nonzero; fill: rgb(215, 218, 85);" transform="matrix(1, 0, 0, 1, 0, -7.105427357601002e-15)" clip-path="url(#cup-clip)">
    <animate attributeName="d" values="M 54.885 151.764 C 73.168 143.554 75.76 124.011 111.277 98.943 C 146.794 73.875 163.342 76.758 186.793 78.455 C 210.244 80.152 243.25 87.673 259.122 101.068 C 274.994 114.463 319.353 147.575 327.201 151.764 L 327.201 275.688 L 54.885 275.688 L 54.885 151.764 Z; M 54.885 151.764 C 73.168 143.554 75.76 124.011 111.277 98.943 C 146.794 73.875 163.342 76.758 186.793 78.455 C 210.244 80.152 243.25 87.673 259.122 101.068 C 274.994 114.463 319.353 147.575 327.201 151.764 L 327.201 275.688 L 54.885 275.688 L 54.885 151.764 Z" begin="0.13s" dur="2s" fill="freeze" end="2.13s"/>
    <animateMotion path="M 0 -19.124 L 22.441 -81.809" calcMode="linear" begin="0s" dur="2s" fill="freeze"/>
  </path>
</svg>

关键步骤说明 #

• 定义裁剪区域：新增<clipPath>元素，内部放入与杯子完全一致的路径形状（仅保留路径数据d，无需样式），并设置唯一ID用于引用。
• 绑定裁剪到液体：给液体路径添加clip-path="url(#cup-clip)"属性，指定使用定义好的裁剪路径，这样液体只会在杯子形状范围内显示。
• 保留杯子视觉：原有的cup路径继续保留，用于展示杯子的外观，裁剪仅作用于液体的显示范围。

内容的提问来源于stack exchange，提问作者danilo