keyPoints

SVG 元素
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

keyPoints attribute indicates the simple duration of an animation.

You can use this attribute with the following SVG elements:

范例

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

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
      stroke="lightgrey" stroke-width="2" fill="none" id="motionPath"/>
  <circle cx="10" cy="110" r="3" fill="lightgrey"/>
  <circle cx="110" cy="10" r="3" fill="lightgrey"/>
  <circle r="5" fill="red">
    <animateMotion dur="3s" repeatCount="indefinite"
        keyPoints="0;0.5;1" keyTimes="0;0.15;1" calcMode="linear">
      <mpath xlink:href="#motionPath"/>
    </animateMotion>
  </circle>
</svg>

用法注意事项

值	`<number>` [; `<number>` ]* ;?
默认值	None
Animatable	No

<number> [; <number>] ;?

规范

规范	状态	注释
SVG Animations Level 2 The definition of 'keyPoints' in that specification.	编者草案	无变化
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'keyPoints' in that specification.	推荐	初始定义

浏览器兼容性

BCD tables only load in the browser

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide .

最后修改： Sep 23, 2021 , 由 MDN 贡献者