Tutorial: Create a CSS and SVG powered, real looking Map

Scalable Vector Graphics, short SVG, are powerful XML based vector graphics. Unfortunately SVG isn’t 100% supported by all browsers, but the most modern browser support the most things, except the Internet Explorer (what a coincidence!). You could get an clear overview on caniuse.com of the SVG-browser-support. If you combine the power of CSS and SVG you could create awesome effects like a 3D looking maps without plugins, when your browser support it. I created the map with Firefox 3.6, but it works also ongoing with Firefox 3.5 (Gecko 1.9.1). Sadly I don’t get it work in WebKit, it seems to be a bug that WebKit don’t work with SVG powered CSS masks. There exists a property for CSS mask: -webkit-mask(-image) but there is no working example online, just a screenshot example in the WebKit Developer Blog.

The most CSS code should be no problem for advanced CSS coders. The -moz-transform/-webkit-transform property rotates the #map-wrapper element to -5 degrees. -moz-box-shadow creates the map shadow to give the map an additional deep. clip-path properties referencing the SVG clip-path-polylines and mask the SVG mask.

The #mask element attributes are based of the relative width and height of the referenced element (in this case #map img). All mask-rects (5 rects) have a width of 20% and are have 100% height related to the referenced element. The x-attribute is every time 0.2 higher from rect to rect, that the last element (width 20% = 0.2) has an end width of 100%. The color changes from rect to rect to simulate the folded map.

Now we are nearly finished, we just have to clip the borders with SVG clip-paths. The #clip-outer clips the border of the white (background) wrapper and #clip-inner of the image map itself. The clip-path is based on a polyline/polygon, the first number represents the y-, the second number the x-position and the space between the two numbers separates the particular x/y position of the points.

Additional notes

The document has to have the "real" XHTML header: "Content-Type: application/xhtml+xml" to work. Also this currently just works in Firefox, if you have any idea how to get this work in other browsers, let me know it! If you need addition resources/information about that topic, visit MDC (Mozilla Developer Center): Applying SVG effects to HTML content.

Twitter & Google +1 & Facebook

We use cookies to ensure that we give you the best experience on our website. This include cookies from third party websites if you visit a page which contains embedded content from third parties. Our partners also use cookies to ensure we show you advertising that is relevant to you. If you continue without changing your settings, we'll assume that you are happy to receive all cookies on the website. However, you can change your cookie settings at any time.