Text Navigation Bars
A text navigation bar has just about the simplest design you can create. The code for a three-page text navigation bar is shown in Listing 5.10. The purpose of the deep blue rectangle is simply to show you the boundary of the navigation bar. The navigation bar is contained within a nested <svg> element. If you want to move the navigation bar slightly up or to the side (or even to the right side of the page), you can do that by changing only the x and y attributes of the nested <svg> element and maintaining the relative positioning of everything inside it.
Listing 5.10. (TextNavBar01.svg)
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/ DTD/svg10.dtd"> ... |
Get Designing SVG Web Graphics now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
