SVG <ellipse>
- Предыдущая страница Круг SVG
- Следующая страница Прямоугольник SVG
SVG эллипс - <ellipse>
<ellipse>
Элемент используется для создания эллипса.
Эллипс тесно связан с кругом. Разница заключается в том, что у эллипса разные 半径 x и y, а у круга они равны:
Пример 1
Ниже приведен пример создания эллипса:
Это код SVG:
<svg height="140" width="500"> <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg>
Объяснение кода:
- Атрибут cx определяет координату x центра эллипса
- Атрибут cy определяет координату y центра эллипса
- Атрибут rx определяет горизонтальный 半径
- Атрибут ry определяет вертикальный 半径
Пример 2
Ниже приведен пример создания трех эллипсов, перекрывающихся друг на друга:
Это код SVG:
<svg height="150" width="500"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" /> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" /> </svg>
Пример 3
Ниже приведен пример комбинации двух эллипсов (один желтый, один белый):
Это код SVG:
<svg height="100" width="500"> <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /> <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" /> </svg>
- Предыдущая страница Круг SVG
- Следующая страница Прямоугольник SVG