keySplines

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>

keySplines attribute defines a set of Bézier curve control points associated with the keyTimes list, defining a cubic Bézier function that controls interval pacing.

This attribute is ignored unless the calcMode attribute is set to spline .

If there are any errors in the keySplines specification (bad values, too many or too few values), the animation will not occur.

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">
  <circle cx="60" cy="10" r="10">
    <animate attributeName="cx" dur="4s" calcMode="spline" repeatCount="indefinite"
        values="60; 110; 60; 10; 60" keyTimes="0; 0.25; 0.5; 0.75; 1"
        keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"/>
    <animate attributeName="cy" dur="4s" calcMode="spline" repeatCount="indefinite"
        values="10; 60; 110; 60; 10" keyTimes="0; 0.25; 0.5; 0.75; 1"
        keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"/>
  </circle>
</svg>

用法注意事项

值	`<control-point>` [ `;` `<control-point>` ]* `;` ?
默认值	None
Animatable	No

The attribute value is a semicolon-separated list of control point descriptions.

<control-point>
- : Each control point description is a set of four values: x1 y1 x2 y2 , describing the Bézier control points for one time segment. The keyTimes values that define the associated segment are the Bézier "anchor points", and the keySplines values are the control points. Thus, there must be one fewer sets of control points than there are keyTimes . The values of x1 y1 x2 y2 must all be in the range 0 to 1.
Safari issues
- : keyTimes values should be separated with semicolumn without space before, f.e: keyTimes="0; 0.25; 0.5; 0.75; 1"

规范

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

浏览器兼容性

No compatibility data found for svg.elements.animate.keySplines .
Check for problems with this page or contribute missing data to mdn/browser-compat-data .

另请参阅

Bézier curve

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 .

最后修改： Jan 19, 2022 , 由 MDN 贡献者