XSLT Cookbook

Creating Interactive SVG-Enabled Web Pages

Problem

You want to embed SVG in HTML to create an interactive user experience.

Solution

This solution is based on an adaptation of code presented in Didier Martin’s XML.com article Integration by Parts: XSLT, XLink and SVG (http://www.xml.com/lpt/a/2000/03/22/style/index.html). The stylesheet embeds an SVG graphic in an HTML page along with information obtained from an XML document. JavaScript is added to allow the user to interact with the graphic. This particular example is a prototype of an online real-estate application in which users can interact with a layout diagram of a house.

The input XML contains information about the house. Each room is associated with an id that links the data in the room to a <g> element in the SVG diagram with the same identifier:

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="HouseLayout.xsl"?> <House> <Location> <Address>1234 Main St. </Address> <City>Pleasantville </City> <State>NJ</State> </Location> <Layout figure="HouseLayout.svg"> <Room id="bedroom1"> <Name>Bedroom</Name> <Length>10</Length> <Width>10</Width> <Windows>2</Windows> <Misc>View of junk yard</Misc> </Room> <Room id="bedroom2"> <Name>Bedroom</Name> <Length>10</Length> <Width>10</Width> <Windows>1</Windows> <Misc>Elvis slept here</Misc> </Room> <Room id="masterBedroom"> <Name>Master Bedroom</Name> <Length>18</Length> <Width>10</Width> <Windows>3</Windows> <Misc>Walk in Closet</Misc> </Room> <Room id="masterBath"> ...