restart

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>

restart attribute specifies whether or not an animation can restart.

You can use this attribute with the following SVG elements:

范例

html, body, svg {
  height: 100%;
}
a {
  fill: blue;
  text-decoration: underline;
  cursor: pointer;
}

<svg viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg">
  <rect y="30" width="100" height="100">
    <animate attributeType="XML" attributeName="y" from="30" to="100"
        dur="5s" repeatCount="1" restart="always" />
  </rect>
  <rect x="120" y="30" width="100" height="100">
    <animate attributeType="XML" attributeName="y" from="30" to="100"
        dur="5s" repeatCount="1" restart="whenNotActive"/>
  </rect>
  <a id="restart"><text y="20">Restart animation</text></a>
</svg>

document.getElementById("restart").addEventListener("click", evt => {
  document.querySelectorAll("animate").forEach(element => {
    element.beginElement();
  });
});

用法注意事项

值	`always` \| `whenNotActive` \| `never`
默认值	`always`
Animatable	No

always
whenNotActive
never

规范

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

浏览器兼容性

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

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 贡献者