HTML and CSS Reference
In-Depth Information
Modifying the
style
attribute will visually change the pre-
sentation of the ellipse. The following example changes the fill to
blue and the stroke color to gray. Figure 3.17 shows the results.
<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=”100%” height=”100%” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<ellipse cx=”300” cy=”150” rx=”250” ry=”120”
style=”fill:blue;
stroke:gray;stroke-width:5”/>
</svg>
Both the Fill and Stroke properties control the color of the
inside of an image. In this example a CSS color name is used,
but you can use any of the color formats you use to control CSS,
including the following:
• Color name—you can have names for colors such as
brown, black, red, or cyan.
• Fullhexadecimal—ahexadecimalvaluecomprisedofsix
alpha-numeric values.
• Short hexadecimal—a hexadecimal value comprised of
three alpha-numeric values.
• RGB—acombinationofred,green,andbluevalues.
• RGBA—acombinationofred,green,andbluevalueswith
a transparency value (alpha).
• HSL—acombinationofhue,saturation,andlightness.
• HSLA—acombinationofhue,saturation,andlightness
with a transparency value (alpha).
In addition to using CSS colors you can use any of the follow-
ing measurements:
• cm—centimeter
• in.—inch
• mm—millimeter
• pc—pica(1pica=12points)
• pt—point(1point=
1
/
72
inch)
• px—pixels
Through leveraging CSS you can change the stroke of the
ellipse using short hexadecimal and the measurement in CM.
<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=”100%” height=”100%” version=”1.1”
Figure 3.17
CSS is used to set
the visual appearance of an SVG
drawing.
