SVG代表可縮放矢量圖形。它可以像HTML畫布一樣用於製作圖形和動畫。
SVG <animateMotion>元素用於定義元素如何沿運動路徑移動。
用法:
<animateMotion values="" dur="" repeatCount="" path="" />
屬性：
- keyPoints:此屬性表示在[0，1]範圍內，每個keyTimes關聯值的對象在路徑中的距離。
- path:此屬性定義運動的路徑。
- rotate:此屬性定義應用於沿路徑動畫的元素的旋轉，通常是使其指向動畫的方向。
- Animation Attributes:用於提供動畫效果的屬性，exp定時屬性，事件屬性和值屬性等。
- Global Attributes:一些常用的全局屬性，例如核心屬性和樣式屬性等。
例：
<!DOCTYPE html>
<html>
<body>
<svg width="1200" height="1200">
<circle cx="60" cy="60" r="5" fill="green">
<animateMotion dur="10s" repeatCount="indefinite"
path="M20, 60 C20,
-50 180, 150 180,
60 C180-60 20,
150 20, 60 z" />
</circle>
</svg>
</body>
</html>輸出：
支持的瀏覽器：此SVG元素支持以下瀏覽器：
- Chrome
- Edge
- Firefox
- Safari
- Opera
相關用法
- SVG <marker>用法及代碼示例
- SVG <desc>用法及代碼示例
- SVG <a>用法及代碼示例
- SVG <clipPath>用法及代碼示例
- SVG <title>用法及代碼示例
- SVG <animate>用法及代碼示例
- SVG <g>用法及代碼示例
- SVG <textPath>用法及代碼示例
- SVG <tspan>用法及代碼示例
- SVG <use>用法及代碼示例
- SVG <symbol>用法及代碼示例
- SVG <foreignObject>用法及代碼示例
- SVG <hatch>用法及代碼示例
- SVG <set>用法及代碼示例
- SVG <feFlood>用法及代碼示例
- SVG <feBlend>用法及代碼示例
注：本文由純淨天空篩選整理自taran910大神的英文原創作品 SVG <animateMotion> element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。