files/ru/web/svg/element/ellipse/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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

---
title: <ellipse>
slug: Web/SVG/Element/ellipse
tags:
  - NeedsUpdate
translation_of: Web/SVG/Element/ellipse
original_slug: Web/SVG/Элемент/ellipse
---
<div>{{SVGRef}}</div>

<p>Элемент <code>ellipse</code> — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов.</p>

<div class="blockIndicator note">
<p>Сам по себе элемент <code>ellipse </code>не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45<strong>°</strong>), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}.</p>
</div>


<div class="hidden">
<pre><code>html,body,svg { height:100% }</code></pre>
</div>

<pre><code>&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;ellipse cx="100" cy="50" rx="100" ry="50" /&gt;
&lt;/svg&gt;</code></pre>

<p>{{EmbedLiveSample('Exemple', 100, '100%')}}</p>


<h2 id="Атрибуты">Атрибуты</h2>


<dl>
 <dt>{{SVGAttr("cx")}}</dt>
 <dd>Позиция эллипса по x.<br>
 <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
 <dt>{{SVGAttr("cy")}}</dt>
 <dd>Позиция эллипса по y.<br>
 <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
 <dt>{{SVGAttr("rx")}}</dt>
 <dd>Радиус эллипса по x.<br>
 <small><em>Тип значения</em>: <code>auto</code>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ;<em>Значение по умолчанию</em>: <code>auto</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
 <dt>{{SVGAttr("ry")}}</dt>
 <dd>Радиус эллипса по y.<br>
 <small><em>Тип значения</em>: <code>auto</code>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Значение по умолчанию</em>: <code>auto</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
 <dt>{{SVGAttr("pathLength")}}</dt>
 <dd>Этот атрибут позволяет установить длину всего пути.<br>
 <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a> ; <em>Значение по умолчани</em>: <em>нет</em>; <em>Можно анимировать</em>: <strong>да</strong></small></dd>
 <dd>


 <div class="blockIndicator note">
 <p><strong>Обратите внимание:</strong> Начиная с SVG2, <code>cx</code>, <code>cy</code>, <code>rx</code> и <code>ry</code> это <em>Геометрические свойства</em>. Это означает, что они могут быть использованы как CSS свойства элемента.</p>
 </div>

 <h3 id="Глобальные_Атрибуты">Глобальные Атрибуты</h3>
 </dd>
 <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt>
 <dd><small>Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
 <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Атрибуты стиля</a></dt>
 <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
 <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Условные атрибуты</a></dt>
 <dd><small>Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
 <dt>Аттрибуты событий</dt>
 <dd><small><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Глобальные атрибуты событий</a>, <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd>
 <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Атрибуты представления</a></dt>
 <dd><small>Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
 <dt>ARIA-Атрибуты</dt>
 <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>,<code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>,<code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>,<code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>,<code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
</dl>


<h2 id="Информация">Информация</h2>

<p>{{svginfo}}</p>


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

<p>» <a href="https://developer.mozilla.org/files/3253/ellipse.svg">ellipse.svg</a></p>

<h2 id="Интерфейс_DOM">Интерфейс DOM</h2>

<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Этот элемент</span> <span class="hps">реализует интерфейс </span></span>{{ domxref("SVGEllipseElement") }}.</p>

<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('SVG2', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>Исходное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

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


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

<ul>
 <li>{{SVGElement("circle")}}</li>
</ul>