♦ SVG Ellipse
♣ About SVG Ellipse
Ellipse have two radius.In SVG Ellipse can be defined with ellipse-tag.
♣ Example1: Ellipse in SVG
In this example, Ellipse is illustrated. Example
Input:
xxxxxxxxxx
1
<!DOCTYPE html>
2
<html>
3
<body>
4
5
<h1>Ellipse in SVG</h1>
6
7
8
<svg height="140" width="500">
9
<ellipse cx="200" cy="80" rx="80" ry="40"
10
style="fill:lightgreen;stroke:blue;stroke-width:2" />
11
</svg>
12
13
</body>
14
</html>
Output:
♣ Example2: Overlapping Ellipse in SVG
In this example, Ellipses are overlapped. Example
Input:
xxxxxxxxxx
1
<!DOCTYPE html>
2
<html>
3
<body>
4
5
<h1>Overlapped Ellipses in SVG</h1>
6
7
8
9
10
<svg height="240" width="1500">
11
12
<ellipse cx="200" cy="80" rx="160" ry="40"
13
style="fill:lightgreen;stroke:blue;stroke-width:2" />
14
15
16
<ellipse cx="200" cy="80" rx="180" ry="20"
17
style="fill:whitesmoke;stroke:blue;stroke-width:6" />
18
19
20
21
22
<ellipse cx="200" cy="130" rx="200" ry="50"
23
style="fill:lightyellow;stroke:blue;stroke-width:2" />
24
25
26
27
</svg>
28
29
</body>
30
</html>
Output: