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"> ...
Get XSLT Cookbook 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.