我自己找到了答案。技巧是使用keyTimes
, 将其设置为"0;{start};{end};1"
, where{start}
和{end}
是当您想要显示或隐藏元素时的时间分数 (timeInSeconds/duration)。这样,它们都是独立的,有点像时间线:)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Svg animation</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100">
<rect x="10" y="10" width="50" height="50" fill="green">
<animate
attributeName="display"
values="none;inline;none;none"
keyTimes="0;0;0.4;1"
dur="3s"
begin="0s" repeatCount="indefinite" />
</rect>
<rect x="50" y="50" width="50" height="50" fill="red" >
<animate
attributeName="display"
values="none;inline;none;none"
keyTimes="0;0.3333;0.666;1"
dur="3s"
begin="0s" repeatCount="indefinite" />
</rect>
<rect x="90" y="10" width="50" height="50" fill="blue" >
<animate
attributeName="display"
values="none;inline;none;none"
keyTimes="0;0.6666;1;1"
dur="3s"
begin="0s" repeatCount="indefinite" />
</rect>
</svg>