Эллипс SVG
Описание элемента <ellipse>
Элемент SVG <ellipse> создаёт эллипсы. Эллипс центрируется с помощью атрибутов cx и cy. Однако, в отличие от элемента <circle>, радиус по осям x и y задаётся двумя атрибутами, а не одним.
DANGER
Эллипс и окружность похожи. Разница между ними заключается в том, что у эллипса радиусы по осям x и y различаются. Радиусы окружности по осям x и y равны. Элемент эллипса не задаёт точную ориентацию, но вы можете повернуть его с помощью атрибута transform.
Пример элемента SVG <ellipse>:
Пример элемента 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 задаёт координату x центра эллипса.
- Атрибут cy задаёт координату y центра эллипса.
- Атрибут rx задаёт горизонтальный радиус.
- Атрибут ry задаёт вертикальный радиус.
Пример элемента SVG <ellipse> для создания двух эллипсов, наложенных друг на друга:
Пример элемента 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> для объединения двух эллипсов:
Пример элемента 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>| Атрибут | Описание |
|---|---|
| cx | Этот атрибут задаёт позицию x эллипса. |
| cy | Этот атрибут задаёт позицию y эллипса. |
| rx | Этот атрибут задаёт радиус эллипса по оси x. |
| ry | Этот атрибут задаёт радиус эллипса по оси y. |
| pathlength | Этот атрибут задаёт общую длину пути в пользовательских единицах. |
Элемент SVG <ellipse> также поддерживает Глобальные атрибуты и Атрибуты событий.
Практика
Какие атрибуты можно использовать для определения SVG-эллипса в HTML?