SVG Эллипс - <Эллипс>
<ellipse> элемент используется для создания эллипса.
Эллипс тесно связана с кругом. Разница заключается в том, что эллипс имеет х и Ау радиус, который отличается друг от друга, в то время как круг имеет равные х и у радиус:
Пример 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>
Попробуй сам " Code explanation:
- cx атрибут определяет х координата центра эллипса
- cy атрибут определяет у координаты центра эллипса
- 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
Следующий пример объединяет два эллипсы (one yellow and one white) :
Вот код 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>
Попробуй сам "