非常教程

SVG参考手册

属性 | Attributes

keytimes

keyTimes属性是分号分隔的时间值列表,用于控制动画的速率。列表中的每一个时间值对应于values属性列表中的一个值,并定义何时在动画中使用该值。每keyTimes列表中的每个时间值都被指定为介于0和1(含)之间的浮点值,表示与动画元素的持续时间成比例的偏移量。

如果指定了keyTimes列表,则列表中的值必须与keyTimes列表中的值的数目完全相同。

每个后续的时间值必须大于或等于先前的时间值。

keyTimes列表的语义取决于插值方式:

  • 对于线性(linear)和样条线(spline)动画,列表中的第一个时间值必须为0,列表中的最后一个时间值必须为1。与每个值关联的关键时间(key time)定义值何时设置; 值在关键时间之间被内插。
  • 对于离散动画,列表中的第一个时间值必须为0。与每个值关联的时间定义值何时设置; 动画函数使用该值直到下一次定义keyTimes为止。

如果插值模式是paced,则该keyTimes属性被忽略。

如果持续时间不确定,则任何keyTimes规格都将被忽略。

用法上下文

Categories

Animation value attribute

Value

<list>

Animatable

No

Normative document

SVG 1.1 (2nd Edition)

实例

<?xml version="1.0"?>
<svg width="120" height="120"  
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
 
    <circle cx="60" cy="10" r="10">
 
        <animate attributeName="cx"
                 attributeType="XML"
                 dur="4s"
                 values="60 ; 110 ; 60 ; 10 ; 60"
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/>
 
        <animate attributeName="cy"
                 attributeType="XML"
                 dur="4s"
                 values="10 ; 60 ; 110 ; 60 ; 10 "
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/>
 
    </circle>
</svg>

实时样例

适用元素

以下元素可以使用该keyTimes属性

  • <animate>
  • <animatecolor>
  • <animatemotion>
  • <animatetransform>

属性 | Attributes相关

1.accent-height(焦点高度)
2.accumulate(积累)
3.additive
4.alignment-baseline(对齐基线)
5.ascent
6.attributename(属性名字)
7.Attributes(属性)
8.attributetype(属性类型)
9.azimuth(方位)
10.basefrequency
11.baseline-shift(基线漂移)
12.baseprofile
13.begin(开始)
14.bias(偏压)
15.calcmode
16.class
17.clip(剪辑)
18.clip-path(剪辑路径)
19.clip-rule(剪辑规则)
20.clippathunits
21.color(颜色)
22.color-interpolation(彩色插值)
23.color-interpolation-filters(色彩插值滤波器)
24.color-profile(彩色轮廓)
25.color-rendering(显色)
26.contentscripttype
27.contentstyletype
28.cursor(光标)
29.cx
30.cy
31.d
32.diffuseconstant
33.direction(方向)
34.display(显示)
35.divisor
36.dominant-baseline(显性基线)
37.dur
38.dx
39.dy
40.edgemode
41.elevation
42.end
43.externalresourcesrequired
44.fill
45.fill-opacity
46.fill-rule
47.filter
48.filterres
49.filterunits
50.flood-color
51.flood-opacity
52.font-family
53.font-size
54.font-size-adjust
55.font-stretch
56.font-style
57.font-variant
58.font-weight
59.fr
60.from
61.fx
62.fy
63.gradienttransform
64.gradientunits
65.height
66.href
67.image-rendering
68.in
69.in2
70.k1
71.k2
72.k3
73.k4
74.kernelmatrix
75.kernelunitlength
76.kerning
77.keysplines
78.lengthadjust
79.letter-spacing
80.lighting-color
81.limitingconeangle
82.local
83.marker-end
84.marker-mid
85.marker-start
86.markerheight
87.markerunits
88.markerwidth
89.mask
90.maskcontentunits
91.maskunits
92.max
93.min
94.mode
95.numoctaves
96.opacity
97.operator
98.order
99.overflow
100.overline-position
SVG

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。