W3docs
ru
Войти

SVG Circle

На этой странице вы найдёте информацию об элементе SVG <circle>, научитесь создавать круг с его помощью и увидите примеры с атрибутами.

Описание элемента <circle>

Элемент SVG <circle> рисует круг по заданной центральной точке и радиусу. Координаты центра окружности задаются атрибутами cx и cy, а радиус — атрибутом r.

Это один из базовых фигурных элементов SVG, наряду с <ellipse>, <rect> и элементом <line>. Используйте <circle> всякий раз, когда нужна идеально круглая форма, сохраняющая качество при масштабировании, поскольку SVG является векторным форматом.

Пример элемента SVG <circle>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="300" width="300">
      <circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Попробуйте сами »

Разберём приведённый выше код:

  • Атрибуты cx и cy задают координаты x и y центра окружности.
  • Атрибут r задаёт радиус окружности.
  • Атрибуты stroke и stroke-width рисуют серую обводку толщиной 5px, а fill закрашивает внутреннюю область фиолетовым цветом.

Важный момент с cx/cy по умолчанию: если опустить cx и cy, они оба принимают значение 0, размещая центр в левом верхнем углу SVG-холста. В результате видимой останется только нижняя правая четверть круга — остальное обрезается за пределами viewport. Всегда устанавливайте cx и cy не менее чем в r, чтобы весь круг помещался внутри SVG.

Продвинутые техники работы с SVG Circle

Базовые SVG-круги хороши сами по себе, однако существует множество продвинутых техник, которые помогут сделать ваши SVG-круги ещё более выразительными. Вот несколько примеров:

Градиенты

SVG-круги могут использовать градиенты для создания плавного перехода между цветами. Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg>
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
    </svg>
  </body>
</html>
Попробуйте сами »

В этом примере создан градиент от жёлтого к красному. Затем атрибут fill используется для применения градиента к кругу.

Тени

SVG-круги также могут иметь тени, создающие глубину и объём. Фильтр должен быть определён внутри блока <defs> (или как минимум перед элементом, который на него ссылается), чтобы браузер мог разрешить ссылку url(#shadow). Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="120" height="120">
      <defs>
        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" />
        </filter>
      </defs>
      <circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
    </svg>
  </body>
</html>
Попробуйте сами »

Здесь мы определяем фильтр тени в <defs> и применяем его к кругу с помощью filter="url(#shadow)". Примитив feDropShadow выполняет основную работу: dx и dy задают смещение тени, stdDeviation управляет степенью размытия, а flood-color задаёт цвет тени. Атрибуты x, y, width и height фильтра расширяют область фильтрации до 140%, чтобы смещённая размытая тень не обрезалась по краям области фильтра по умолчанию.

Анимация

Наконец, SVG-круги можно анимировать для создания интерактивных пользовательских взаимодействий. Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg>
      <circle id="myCircle" cx="50" cy="50" r="40" fill="green">
        <animate attributeName="cx" from="50" to="200" dur="1s" begin="click" />
      </circle>
    </svg>
  </body>
</html>
Попробуйте сами »

В этом примере создан зелёный круг, который перемещается при нажатии. Элемент <animate> используется для определения анимации, а атрибут attributeName указывает, какое свойство нужно изменять.

Примечание: <animate> является частью SMIL, поддержка которого в браузерах неоднородна и которая в прошлом была помечена как устаревшая в некоторых движках. Для производственного использования CSS-анимации или JavaScript (например, Web Animations API) обычно являются более надёжным выбором.

Атрибуты

Элемент SVG <circle> также поддерживает Глобальные атрибуты и Атрибуты событий.

АтрибутОписание
cxКоордината x центра окружности по оси x. По умолчанию равна 0.
cyКоордината y центра окружности по оси y. По умолчанию равна 0.
rРадиус окружности. Значение, меньшее или равное нулю, отключает отображение круга.
strokeЦвет обводки окружности.
stroke-widthШирина обводки окружности в пользовательских единицах.
fillЦвет, используемый для заливки внутренней области круга.
pathLengthЗадаёт общую длину пути в пользовательских единицах (имена атрибутов SVG чувствительны к регистру).

Круги также принимают общие SVG-атрибуты представления: fill-opacity и stroke-opacity управляют прозрачностью заливки и обводки, а stroke-dasharray преобразует сплошную обводку в пунктирную (например, stroke-dasharray="10 5").

Элемент <circle> тесно связан с другими базовыми фигурами SVG. См. SVG <ellipse> для овалов с двумя независимыми радиусами и SVG <rect> для прямоугольников и прямоугольников со скруглёнными углами.

Практика

Практика
Какой атрибут строго обязателен для отображения видимого элемента SVG circle?
Какой атрибут строго обязателен для отображения видимого элемента SVG circle?
Was this page helpful?