嵌套SVG时，如何从子SVG引用父元素实现路径动画？

可以在子SVG内引用父SVG中的运动路径，但你的代码存在两处关键错误导致引用失效，修正方法如下：

• 选择器写法错误：mpath的href属性只需直接指定目标元素的ID，无需添加父SVG的ID和空格。正确写法为href="#motionPath"——ID在整个SVG文档中全局唯一，无需额外限定父容器。
• 动画作用对象错误：你将animateMotion放在子SVG内部，会让动画作用于子SVG内的图形元素（黄色矩形、圆形），而非整个子SVG容器。要让整个子SVG沿路径运动，需将animateMotion作为子SVG的直接子元素（如示例代码所示）。

修正后的完整代码：

<svg id="parent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect x="0" y="0" width="200" height="200" fill="#87CEEB" />
  
  <!-- 运动路径 -->
  <path d="M20,50 C20,-50 180,150 180,50 C180,-50,20,150 20,50 z" id="motionPath" fill="none" stroke="red" />
  
  <!-- 要动画的嵌套SVG -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="50" height="50">
    <!-- 动画绑定到整个子SVG容器 -->
    <animateMotion dur="10s" repeatCount="indefinite">
      <mpath href="#motionPath" />
    </animateMotion>
 
    <rect x="0" y="0" width="200" height="200" fill="#FCC25A" />
    <circle r="30" cx="50" cy="50" fill="#000"/>
  </svg>
</svg>

补充说明：若遇到旧浏览器兼容性问题，可将href替换为xlink:href（需确保SVG文档已声明xlink命名空间），但现代浏览器优先推荐使用href。

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