Mozilla SVG clipPath演示效果与描述不符的原因问询

问题描述 #

Mozilla官方的clipPath演示说明：仅红色心形位于clip circle内的部分可见。其clipPath定义为：

<clipPath id="myClip">
  <!--
    Everything outside the circle will be
    clipped and therefore invisible.
  -->
  <circle cx="40" cy="35" r="35" />
</clipPath>

并通过以下方式引用裁剪效果：

<!--
  Only the portion of the red heart
  inside the clip circle is visible.
-->
<use clip-path="url(#myClip)" href="#heart" fill="red" />

但给圆形添加半径从0到60px的动画后，实际运行呈现出“心形裁剪圆形”的视觉效果，与官方描述相悖，请问原因是什么？

完整演示代码如下：

CSS代码 #

html,
body,
svg {
  height: 100%;
}

/* With a touch of CSS for browsers who *
 * implemented the r Geometry Property. */

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

HTML代码 #

<svg viewBox="0 0 100 100">
  <clipPath id="myClip">
    <!--
      Everything outside the circle will be
      clipped and therefore invisible.
    -->
    <circle cx="40" cy="35" r="35" />
  </clipPath>

  <!-- The original black heart, for reference -->
  <path
    id="heart"
    d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />

  <!--
    Only the portion of the red heart
    inside the clip circle is visible.
  -->
  <use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>

原因解析 #

你看到的“心形裁剪圆形”是视觉错觉，核心裁剪逻辑和官方描述完全一致，差异来自动态过程和静态场景的视觉感受不同：

• 静态场景逻辑：固定半径的圆形作为裁剪区域，红色心形只有落在圆形范围内的部分可见，完全符合官方描述。
• 动态动画逻辑：动画修改的是裁剪区域（圆形）的大小，而非被裁剪元素（心形）：
  1. 初始状态下圆形半径为0，裁剪区域是一个点，红色心形完全不可见；
  2. 随着半径增大，圆形覆盖的心形区域逐步扩大，红色心形的可见部分越来越多；
  3. 当半径达到60时，圆形完全覆盖整个心形，红色心形完整显示。
• 视觉错觉来源：这种“从局部到完整显示心形”的过程，和“用形状裁剪固定区域”的直觉相反，导致你误以为是“心形裁剪圆形”，但本质还是圆形作为裁剪窗口决定心形的可见范围。

另外补充：动画中使用的r CSS属性是SVG几何属性的CSS映射，主流现代浏览器均支持，这不是导致视觉差异的原因。

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