files/ru/web/svg/attribute/dur/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

---
title: dur
slug: Web/SVG/Attribute/dur
tags:
  - SVG
  - SVG атрибуты
translation_of: Web/SVG/Attribute/dur
---
<div>{{SVGRef}}</div>

<p>Атрибут <strong><code>dur</code></strong> отображает простую длительность анимации.</p>

<p>Пять элементов используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, и {{SVGElement("set")}}</p>

<div id="topExample">
<div class="hidden">
<pre class="brush: css">html, body, svg {
  height: 100%;
}</pre>
</div>

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

<p>{{EmbedLiveSample("topExample", "220", "150")}}</p>
</div>

<h2 id="Примечания_к_использованию">Примечания к использованию</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Значение</th>
   <td><code><a href="/ru/SVG/Content_type#Clock-value" title="en/SVG/Content_type#Clock-value">&lt;clock-value&gt;</a></code> | <code>indefinite</code> | <code>media</code></td>
  </tr>
  <tr>
   <th scope="row">Значение по умолчанию</th>
   <td><code>indefinite</code></td>
  </tr>
  <tr>
   <th scope="row">Анимируемый</th>
   <td>Нет</td>
  </tr>
 </tbody>
</table>

<dl>
 <dt><code>&lt;clock-value&gt;</code></dt>
 <dd>Задаёт длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (<code>h</code>), минутах (<code>m</code>), секундах (<code>s</code>) или миллисекундах (<code>ms</code>). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: <code>hh:mm:ss.iii</code> или  <code>mm:ss.iii</code></dd>
 <dt><code>media</code></dt>
 <dd>Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.</dd>
 <dt><code>indefinite</code></dt>
 <dd>Задаёт простую длительность, как незаданную</dd>
 <dt></dt>
</dl>

<div class="blockIndicator note">
<p><strong>Примечание:</strong> Интерполяция не будет работать, если простая длительность остаётся неопределённой (хотя это может быть полезно для элементов {{ SVGElement("set") }}).</p>
</div>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG Animations 2", "#DurAttribute", "dur")}}</td>
   <td>{{Spec2("SVG Animations 2")}}</td>
   <td>Без изменений</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "animate.html#DurAttribute", "dur")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Изначальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{Compat("svg.elements.animate.dur")}}</p>