Rendering Triangular Wedges with Shading

   



SVG viewports

SVG allows you to shift the origin of a display and scale it vertically or horizontally with the SVG viewBox attribute. This attribute consists of four numbers (separated by commas and/or white space) that specify the upper-left vertex and the lower-right vertex of the new viewing rectangle, after taking into account any scaling effects. A value of 0 for any of these four numbers indicates that the corresponding coordinate remains unchanged. For example, consider the following code fragment:

 <svg width="800" height="400" viewBox="0 0 800 400">  <g>    <rect style="fill:red;"      x="0" y="0" width="100" height="50"/>  </g>

The preceding fragment renders a red rectangle of width 100 and height 50 whose upper-left vertex is the origin (0, 0) because the first two numbers specified in the viewBox attribute are '0 0', which means the origin is still (0,0), and the last two numbers specified in the viewBox attribute are '800 400', which means that the lower-right vertex of the new viewport corresponds to the same point as the default. The complete SVG code is given in Listing 1.9.

Listing 1.9 viewBoxRect1.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="800" height="400" viewBox="0 0 800 400">  <g>   <rect style="fill:red;"     x="0" y="0" width="100" height="50"/>   <line x1="0" y1="24" x2="100" y2="24"         style="stroke:white;stroke-width:2"/>   <line x1="49" y1="0" x2="49" y2="50"         style="stroke:white;stroke-width:2"/> </g> </svg>
end example

Remarks

The CD-ROM for this chapter contains the SVG documents viewBoxRect2.svg, viewBoxRect3.svg, and viewBoxRect4.svg that illustrate what happens when you specify the following values for the viewBox attribute:

viewBox="50 25 800 400" viewBox="0 0 200 100" viewBox="50 25 200 100"



   



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