files/ru/web/svg/attribute/fill/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
96
97
98
99

---
title: fill
slug: Web/SVG/Attribute/fill
tags:
  - NeedsUpdate
  - SVG
  - SVG атрибуты
translation_of: Web/SVG/Attribute/fill
---
<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p>

<p>Атрибут <code>fill</code> имеет два значения в зависимости от используемого контекста.</p>

<p><span style="line-height: 1.572;">По умолчанию, когда элементы анимации заканчиваются и их эффекты больше не применяются к значению представления для целевых атрибутов. Атрибут <code>fill</code> может использоваться для сохранения значения анимации после окончания активной продолжительности элемента анимации.</span></p>

<p>Для фигур и текста атрибут <code>fill</code> является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения {{ SVGAttr("fill-rule") }} атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS</p>

<h2 id="Контекст_использования">Контекст использования</h2>

<h3 id="Для_анимируемых_элементов">Для анимируемых элементов</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Категория</th>
   <td>Атрибуты времени анимации</td>
  </tr>
  <tr>
   <th scope="row">Значение</th>
   <td><strong title="this is the default value">remove</strong> | freeze</td>
  </tr>
  <tr>
   <th scope="row">Анимация</th>
   <td>Нет</td>
  </tr>
  <tr>
   <th scope="row">Нормативный документ</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#FillAttribute" title="http://www.w3.org/TR/SVG/animate.html#FillAttribute">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<dl>
 <dt>remove (default)</dt>
 <dd>Эффект анимации удаляется (больше не применяется) при завершении активной продолжительности анимации. После активного конца анимации анимация больше не влияет на конечный объект (если анимация не перезапущена).</dd>
 <dt>freeze</dt>
 <dd>Эффект анимации «заморожен» при активной длительности анимации на оставшийся срок действия документа (или до перезапуска анимации).</dd>
</dl>

<h3 id="Для_текста_и_форм">Для текста и форм</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Категория</th>
   <td>Атрибут представления</td>
  </tr>
  <tr>
   <th scope="row">Значение</th>
   <td>
    <p><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint">&lt;paint&gt;</a>, <code>context-fill</code>, <code>context-stroke</code></p>
   </td>
  </tr>
  <tr>
   <th scope="row">Анимация</th>
   <td>Да</td>
  </tr>
  <tr>
   <th scope="row">Нормативный документ</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillProperty" title="http://www.w3.org/TR/SVG/painting.html#FillProperty">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Примеры">Примеры</h2>

<h3 id="Пример_1_Простой_SVG">Пример 1: Простой SVG</h3>

<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;circle cx="100" cy="100" r="100" fill="#666"/&gt;
&lt;/svg&gt;</pre>

<h4 id="Результат">Результат</h4>

<p>{{EmbedLiveSample('Example_1_Simple_SVG', 200, 200)}}</p>

<h2 id="Использование_context-fill">Использование <code>context-fill</code></h2>

<p>Для информации об использовании нестандартного и ограниченного значения  <code>context-fill</code> (и <code>context-stroke</code>) смотрите документацию  {{cssxref("-moz-context-properties")}}.</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<p>Следующие элементы могут использовать атрибут <code>fill</code></p>

<ul>
 <li><a href="/en/SVG/Element#Animation_elements" title="en/SVG/Element#Animation">Animation elements</a> »</li>
 <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
 <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
</ul>