如何让SVG中动效矩形始终处于clipPath范围内？

问题根源在于<clipPath>的默认坐标规则：默认clipPathUnits="objectBoundingBox"，裁剪路径的坐标会跟随被裁剪元素的边界框同步移动，导致动画时裁剪范围“跟着”矩形跑，所以矩形能超出初始圆形区域显示。

只需给<clipPath>添加clipPathUnits="userSpaceOnUse"属性，让裁剪路径基于SVG视口的固定坐标系，就能固定裁剪区域的位置：

<svg width="500" height="150">
    <clipPath id="circle" clipPathUnits="userSpaceOnUse">
     <circle cx=50 cy=50 r=50></circle>
    </clipPath>
    <circle cx=50 cy=50 r=50></circle>
    <rect x="0" y="0" width="30" height="15"
          style="stroke: #ff0000; fill: none;" clip-path='url(#circle)'>
        <animateMotion
                path="M10,50 q60,50 100,0 q60,-50 100,0"
                begin="0s" dur="10s" repeatCount="indefinite"
                rotate="auto"
               ></animateMotion>
    </rect>
</svg>

添加该属性后，裁剪用的圆形会固定在SVG视口的(50,50)位置，无论矩形怎么沿路径运动，只有进入这个圆形区域的部分才会显示，超出部分会被完全裁剪隐藏。

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