Using rect to Render Rectangles

   



Using style

Notice how the color of the rectangle in Listing 1.2 is specified by means of the style attribute. If you have not worked with cascading stylesheets, here is an example of how to specify a red rectangle with a blue border of width 4 using style:

   style="fill:red;stroke-width:4;stroke:blue"

Alternatively, you could specify each attribute individually as follows:

 fill="red" stroke-width="4" stroke="blue"

Since white space is not significant, you could also split the preceding line into multiple lines:

  fill="red"   stroke-width="4"   stroke="blue"

The point to observe regarding the SVG style element is that it's a quoted list of colon-delimited name/value pairs that are concatenated by means of a semi-colon; if you wish to specify an attribute and its value outside the quoted list, you need to replace the colon with an equals sign and quote the value of the attribute. Below is a simple example:

 style="fill:red"

This could be replaced with:

 fill="red"

The SVG style element allows you to specify attributes that are useful for rendering text. Here is an example of how to specify a particular combination of font family, font size, and font style:

 style="font-family:serif;font-size:24;style:italic;"

The preceding attributes can also be specified as follows:

 font-family="serif"  font-size="24"  style="italic"

Sometimes you need to specify the same attribute/value pair for many graphics elements in an SVG document; this can produce SVG documents that have a lot of repeated code. If you need to change a particular attribute value, you need to do so in many places, which can be tedious and error-prone. Fortunately, there is a way to define a 'core' set of attribute/value pairs that are applied to all the graphics elements in an SVG document. This approach makes for smaller files and more legible SVG code in which core attribute values can be changed in one place. This technique (and the associated precedence rules) will be described in more detail in Chapter 2.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net