内容表

• 范例
• 用法注意事项
• 规范
• 浏览器兼容性

dur

1. SVG 元素

   1. A
      1. <a>
      2. <altGlyph>
      3. <altGlyphDef>
      4. <altGlyphItem>
      5. <animate>
      6. <animateColor>
      7. <animateMotion>
      8. <animateTransform>
   2. B-C
      1. <circle>
      2. <clipPath>
      3. <color-profile>
      4. <cursor>
   3. D
      1. <defs>
      2. <desc>
   4. E
      1. <ellipse>
   5. F
      1. <feBlend>
      2. <feColorMatrix>
      3. <feComponentTransfer>
      4. <feComposite>
      5. <feConvolveMatrix>
      6. <feDiffuseLighting>
      7. <feDisplacementMap>
      8. <feDistantLight>
      9. <feFlood>
      10. <feFuncA>
      11. <feFuncB>
      12. <feFuncG>
      13. <feFuncR>
      14. <feGaussianBlur>
      15. <feImage>
      16. <feMerge>
      17. <feMergeNode>
      18. <feMorphology>
      19. <feOffset>
      20. <fePointLight>
      21. <feSpecularLighting>
      22. <feSpotLight>
      23. <feTile>
      24. <feTurbulence>
      25. <filter>
      26. <font>
      27. <font-face>
      28. <font-face-format>
      29. <font-face-name>
      30. <font-face-src>
      31. <font-face-uri>
      32. <foreignObject>
   6. G
      1. <g>
      2. <glyph>
      3. <glyphRef>
   7. H
      1. <hkern>
   8. I
      1. <image>
   9. J-L
      1. <line>
      2. <linearGradient>
   10. M
       1. <marker>
       2. <mask>
       3. <metadata>
       4. <missing-glyph>
       5. <mpath>
   11. N-P
       1. <path>
       2. <pattern>
       3. <polygon>
       4. <polyline>
   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
       1. <text>
       2. <textPath>
       3. <title>
       4. <tref>
       5. <tspan>
   15. U
       1. <use>
   16. V-Z
       1. <view>
       2. <vkern>

dur attribute indicates the simple duration of an animation.

You can use this attribute with the following SVG elements:

• <animate>
• <animateColor>
• <animateMotion>
• <animateTransform>
• <set>

范例

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

					

<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate attributeType="XML" attributeName="y" from="0" to="50"
        dur="1s" repeatCount="indefinite"/>
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate attributeType="XML" attributeName="y" from="0" to="50"
        dur="3s" repeatCount="indefinite"/>
  </rect>
</svg>

					

用法注意事项

值	<clock-value> | media | indefinite
默认值	indefinite
Animatable	No

<clock-value>

This value specifies the length of the simple duration. The value must be greater than 0 and can be expressed with hours ( h ), minutes ( m ), seconds ( s ) or milliseconds ( ms ). It's possible to combine those time representations to create some complex durations like hh:mm:ss.iii or mm:ss.iii .

media

This value specifies the simple duration as the intrinsic media duration. This is only valid for elements that define media. (For animation elements the attribute will be ignored if media is specified.)

indefinite

This value specifies the simple duration as indefinite.

注意： the interpolation will not work if the simple duration is indefinite (although this may still be useful for <set> elements).

规范

规范	状态	注释
SVG Animations Level 2 The definition of 'dur' in that specification.	编者草案	无变化
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'dur' 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 贡献者