498 CHAPTER 12 Drawing with HTML5
These paths have a fill color of white. The result in Figure 12-23 shows the rendered car
body with its windows.FIGURE 12-23 he <T path> element that is used to create a car body with windowsDrawing circles
You can add circles to an SVG drawing by using the <circle> element, which has r, cx, cy, fill,
and id attributes. The r attribute sets the circle radius. The cx and cy attributes set the circle
center coordinate. The fill attribute sets the color of the circle. The following example adds
two wheels to the vehicle body created in the previous example.
<circle r="35" cy="185" cx="90" fill="black" id="rearWheel" />
<circle r="35" cy="185" cx="400" fill="black" id="frontWheel" />The completed <svg> element is as follows.
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<path d="m267 76 l-21 -4 -144 0 -90 47 0 54 11 11 23 0 15 -30 15 -10 30 0
15 10 15 30 220 0 15 -30 15 -10 30 0 15 10 15 30 l25 0 7 -7
-13 -38 -20 -10 -95 -15 z" fill="blue" id="carBody" />
<path d="m65 105 l40 -25 65 0 0 34 -112 0 z" fill="white" id="rearWindow" />
<path d="m300 105 l-40 -25 -78 0 0 34 122 0 z" fill="white" id="frontWindow" />
<circle r="35" cy="185" cx="90" fill="black" id="rearWheel" />
<circle r="35" cy="185" cx="400" fill="black" id="frontWheel" />
</svg>The completed car is shown in Figure 12-24.