Game Development Reference
In-Depth Information
r="300"
fill="#ff3" />
<circle
cx="200"
cy="200"
r="100"
fill="#a0a" />
</svg>
You will notice that by default, just like positioned DOM elements, every node has the
same z-index. Thus, if two or more elements overlap, whatever element was drawn
last (meaning that it is positioned farther from the parent than its sibling element) is
rendered on top.
Ellipses are very similar to circles, with the only difference being that they have a ra-
dius for each direction (vertical and horizontal). Other than that minor detail, drawing
an ellipse is the exact same as drawing a circle. Of course, we can simulate circles
by drawing ellipses that have both radii of the same length.
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="1000" height="1000">
<ellipse
cx="400"
cy="300"
rx="300"
ry="100"
fill="#ff3" />
<ellipse
cx="230"
cy="200"
rx="75"
ry="75"
fill="#a0a" />
<ellipse
cx="560"
