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

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

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

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

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



<pre class="brush: xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span>
  <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>



<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg">circle.svg</a></p>

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

<h3 id="Унаследованные">Унаследованные</h3>

<ul>
 <li><a href="/en-US/SVG/Attribute#Conditional_processing_attributes">Условные атрибуты</a> »</li>
 <li><a href="/en-US/SVG/Attribute#Core_attributes">Ключевые атрибуты</a> »</li>
 <li><a href="/en-US/SVG/Attribute#Graphical_event_attributes">Атрибуты графических событий</a> »</li>
 <li><a href="/en-US/SVG/Attribute#Presentation_attributes">Атрибуты представления</a> »</li>
 <li>{{ SVGAttr("class") }}</li>
 <li>{{ SVGAttr("style") }}</li>
 <li>{{ SVGAttr("externalResourcesRequired") }}</li>
 <li>{{ SVGAttr("transform") }}</li>
</ul>

<h3 id="Особые">Особые</h3>

<ul>
 <li>{{ SVGAttr("cx") }}</li>
</ul>

<p>Координата центра окружности по оси x.</p>

<ul>
 <li>{{ SVGAttr("cy") }}</li>
</ul>

<p>Координата центра окружности по оси y.</p>

<ul>
 <li>{{ SVGAttr("r") }}</li>
</ul>

<p>Радиус окружности.</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("SVGCircleElement") }}.</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#CircleElement', '&lt;circle&gt;')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'shapes.html#CircleElement', '&lt;circle&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.circle")}}</p>



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

<ul>
 <li>{{ SVGElement("ellipse") }}</li>
 <li><a href="https://www.svg-expert.ru/svg/circle/">SVG Circle</a></li>
</ul>