W3docs
ru
Войти

SVG Эллипс

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

Что такое элемент SVG <ellipse>?

Элемент SVG <ellipse> рисует эллипс — овальную, «растянутую» окружность. Его позиция задаётся через центральную точку (cx, cy), а форма — двумя радиусами: rx для горизонтального радиуса и ry для вертикального.

В этом и состоит ключевое отличие от элемента <circle>. У окружности один радиус (r), поскольку она одинаково широка во всех направлениях. Эллипсу нужны два радиуса, так как в одном направлении он шире, чем в другом:

  • Используйте <circle>, если фигура идеально круглая.
  • Используйте <ellipse>, когда нужен овал или когда rx и ry должны различаться.

Если задать rx равным ry, эллипс отобразится как окружность.

Система координат SVG

Как и любая SVG-фигура, эллипс располагается на холсте SVG, где начало координат (0, 0) находится в верхнем левом углу. Ось x увеличивается вправо, ось y — вниз. Таким образом, cx="230" cy="120" помещает центр эллипса на 230 единиц от левого края и 120 единиц от верхнего. Подробнее о системе координат и viewport читайте в главе о теге <svg>.

Информация

Элемент <ellipse> не имеет атрибута ориентации, поэтому его оси rx/ry всегда горизонтальны и вертикальны. Чтобы наклонить эллипс, используйте атрибут transform (показан ниже).

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200" >
      <ellipse cx="230" cy="120" rx="150" ry="70" style="fill:pink;stroke:lightblue;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Попробуйте сами »

В приведённом коде cx="230" и cy="120" задают центр, rx="150" делает эллипс шириной 300 единиц, а ry="70" — высотой 140 единиц. Атрибут style заливает его розовым и добавляет светло-голубую обводку шириной 5 единиц.

Пример элемента SVG <ellipse> для создания двух эллипсов, расположенных друг над другом:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg  width="400" height="200">
      <ellipse cx="200" cy="110" rx="160" ry="25" style="fill:lightblue" />
      <ellipse cx="190" cy="85" rx="140" ry="20" style="fill:blue" />
      Sorry,inline SVG isn't supported by your browser. 
    </svg>
  </body>
</html>
Попробуйте сами »

Вы можете добавить сколько угодно эллипсов с разными цветами и размерами.

Пример элемента SVG <ellipse> для объединения двух эллипсов:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="150" >
      <ellipse cx="200" cy="70" rx="200" ry="35" style="fill:purple" />
      <ellipse cx="190" cy="70" rx="160" ry="25" style="fill:lightgrey" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Попробуйте сами »

Пример вращения и стилизации элемента <ellipse>:

Поскольку у <ellipse> нет собственного атрибута ориентации, для наклона используется атрибут transform="rotate(...)". Первые два числа, передаваемые в rotate() после угла, — это центральная точка вращения; в данном случае это собственный центр эллипса, поэтому он вращается на месте. В примере также используются opacity и пунктирная обводка через stroke-dasharray:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="200" cy="100" rx="150" ry="60"
        transform="rotate(-25 200 100)"
        style="fill:plum;opacity:0.7;stroke:purple;stroke-width:4;stroke-dasharray:10,6" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

Значение rotate(-25 200 100) поворачивает эллипс на 25 градусов против часовой стрелки вокруг точки (200, 100), opacity:0.7 делает его слегка прозрачным, а stroke-dasharray:10,6 рисует обводку в виде штрихов длиной 10 единиц с промежутками в 6 единиц.

Атрибуты

АтрибутОписание
cxКоордината x центра эллипса.
cyКоордината y центра эллипса.
rxГоризонтальный радиус (вдоль оси x).
ryВертикальный радиус (вдоль оси y).
pathLengthОбщая длина пути в пользовательских единицах.

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

Связанные главы

  • SVG <circle> — круглый аналог, использующий единственный радиус r.
  • Тег HTML SVG — контейнер <svg>, viewport и система координат.

Практика

Практика
Какие атрибуты задают два радиуса SVG-эллипса?
Какие атрибуты задают два радиуса SVG-эллипса?
Was this page helpful?