Building Web Applications with SVG - Cdn.oreilly.com

example 10: Using to Simulate Digital
elevation Maps
SVG is still evolving. Version 2 of the specification is presently under deliberation by the W3C’s Working
Group. While the language currently has only two types of gradients (linear and radial), several proposals
exist for increasing that number. One, the proposal to allow declarative markup to create many objects
that are tweened from one another—like animation, only spatial rather than temporal—is to use
. While would handle a wide variety of issues (such as this rotatable 3D portrayal
of a geographic landform), other proposals are considerably less broad in scope.
Here’s how it’s done:
■■ Interpolating between paths In this example, which you can find at http://srufaculty.sru
.edu/david.dailey/svg/dem/DEM_1.svg, many concentric polygons (with varying numbers of
points in their definition) are defined through interpolation and then cloned.
■■ Simulating 3D rotation Script then manipulates the data to enable rotation in three
dimensions.
Example 11: Non-Affine Cobblestones
Here’s another example showing the use of (see http://srufaculty.sru.edu/david.dailey/svg/
replicate/repRectsGrad2g.svg). This example replicates interpolated polygons in two directions. While
is not (yet) supported by the SVG specification, it is supported through an open source
JavaScript initiative that allows SVG-like declarative markup to be interspersed with actual SVG to create
a wide range of effects.
CHAPTER 1 SVG Basics 17