<mpath>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

<mpath> SVG 子元素用于 <animateMotion> 元素，它提供了引用外部 <path> 元素作为运动路径定义的能力。

使用上下文

类别	动画元素
允许的内容	任意数量、任意顺序的下列元素：描述性元素

属性

xlink:href 已弃用

DOM 接口

该元素实现了 SVGMPathElement 接口。

示例

SVG

html

<svg
  width="100%"
  height="100%"
  viewBox="0 0 500 300"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect
    x="1"
    y="1"
    width="498"
    height="298"
    fill="none"
    stroke="blue"
    stroke-width="2" />

  <!-- 用蓝色绘制运动路径的轮廓，并在起始点、中点和结束点处绘制三个小圆圈。 -->
  <path
    id="path1"
    d="M100,250 C 100,50 400,50 400,250"
    fill="none"
    stroke="blue"
    stroke-width="7.06" />
  <circle cx="100" cy="250" r="17.64" fill="blue" />
  <circle cx="250" cy="100" r="17.64" fill="blue" />
  <circle cx="400" cy="250" r="17.64" fill="blue" />

  <!-- 这里有一个三角形，它将沿着运动路径移动。它定义为直立方向，三角形的底边水平居中，位于原点上方。 -->
  <path
    d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
    fill="yellow"
    stroke="red"
    stroke-width="7.06">
    <!-- 定义运动路径动画 -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
      <mpath href="#path1" />
    </animateMotion>
  </path>
</svg>

结果

规范

Specification
SVG Animations Level 2 # MPathElement

浏览器兼容性

BCD tables only load in the browser

参见

<animateMotion>