Drawing Homogeneous Bar Sets

   



Drawing Variable Bar Sets

Consider the set of contiguous rectangles in Figure 10.2.

click to expand
Figure 10.2:   A variable bar set.

The SVG document in Listing 10.2 demonstrates how to draw a bar set of rectangles with different heights.

Listing 10.2  barSet2.svg

start example
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <g transform="translate(80,100)">   <!-- draw vertical axis -->   <line x1="-20" y1="-40"         x2="-20" y2="220"         style="stroke:black;stroke-width:2;"/>   <!-- draw horizontal axis -->   <line x1="-20" y1="220"         x2="340" y2="220"         style="stroke:black;stroke-width:2;"/>   <!-- vertical tip: cc from lower-left vertex -->   <polygon points="-25,-40 -15,-40 -20,-55"            style="fill:black;stroke:white"/>   <!-- horizontal tip: cc from lower-left vertex -->   <polygon points="340,225 355,220 340,215"            style="fill:black;stroke:white"/>   <!-- draw bar set -->   <rect x="0" y="50" width="40" height="150"         style="fill:red;stroke:white"/>   <rect x="40" y="20" width="40" height="180"         style="fill:blue;stroke:white"/>   <rect x="80" y="30" width="40" height="170"         style="fill:red;stroke:white"/>   <rect x="120" y="100" width="40" height="100"         style="fill:blue;stroke:white"/>   <rect x="160" y="70" width="40" height="130"         style="fill:red;stroke:white"/>   <rect x="200" y="140" width="40" height="60"         style="fill:blue;stroke:white"/>   <rect x="240" y="50" width="40" height="150"         style="fill:red;stroke:white"/>   <rect x="280" y="40" width="40" height="160"         style="fill:blue;stroke:white"/> </g> </svg>
end example

Remarks

The SVG code in Listing 10.2 is more complicated than the SVG code in Listing 10.1 because of code for rendering the triangular end points of the horizontal and vertical axes. The first part of Listing 10.2 uses an SVG line element for drawing a vertical axis and a horizontal axis, followed by an SVG polygon element for rendering the triangular tip of both axes. Next, the SVG code contains a set of SVG rect elements that render a set of contiguous rectangles of varying heights. Notice that every rectangle has a width of 40, and that the x-coordinate is incremented by 40 pixels, which produces a set of contiguous rectangles. Since the rectangles have different heights, the value of the y attribute and the height attribute varies from rectangle to rectangle. Moreover, the sum of these two values is always 200 for the following reason: each rectangle in this set of rectangles has the same value for the y-coordinate of the lower horizontal line segment that represents the 'base' of each rectangle.



   



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