![]() You mentioned an outline, so let’s do that and a fill color as well. We’ll also apply a class to the state clicked: var allStates = $("svg.us > *") ![]() Here’s how we could watch for clicks on each state. Typically, when I think “clickable”, I think JavaScript. Say I have an of The United States and it’s like this: Įach state then is kind of a direct descendant of the, the selector would be svg.us > *. Then export the svg and embed using object tag: < object data 'images/yourimage.svg' ></ object >.Select to open the page on a new tab, and you are done, easy peasy. This is pretty basic, but it's good starting point for creating a fully featured map.Is there anything on your site that shows me how to make an SVG clickable using CSS? As in, I have an SVG and I click on part of it and it should reveal an outline on that part of the element? I have a telephone interview Tuesday for a job as a remote SVG Illustrator and I don’t want to look like a turkey. Insert a hyperlink into a shape in Vecta.io. The color effect is done with CSS to demonstrate that you can style an SVG element (and its children) with plain CSS. As for the interaction, if you hover a region, you get a popup and the region color changes. OK let's make this thing a bit more useful, I found Belgian population data (2019) on Wikipedia and we're going to plot it on our map, plus we'll make it interactive!īetter? Now we have real data and each region's color represent its population, the colors are shades between green and white, whereas the most populated region (Antwerp province) has a mix of 100% of green and 0% of white, while the least populated (Luxembourg province) has more white than green: this is called a heatmap. Please note that I'm selecting the map regions with draw.find('path') but if you use another map, the regions may be represented by elements or may be inside nested into other elements. In the codepen above we load the map SVG file content with the fetch() method and we render it into the HTML, then we manipulate the map adding labels and changing the colors just for demo purpose. Yeah so easy! I only used a tiny library for SVG manipulation called Svg.js, even if it's not mandatory, it makes life a bit easier. And with the addition of pointer-events, we can improve the way our SVG documents behave in response to user interaction. We can create linked areas that don’t adhere to the CSS and HTML box model. We can use it to create charts that respond to clicks or taps. So let's start with step 1 and part of 2: SVG supports the same kind of interactivity we’re used to with HTML. ![]() Attach mouse events listeners (for click and hover) to regions.Color the map regions based on supplied data.Load the SVG map and render it into the HTML page.Now we're ready to go, these are the features we're going to implement at the end of the article: When I speak of regions I refer to geographical regions, that is any of country, region, province, state, area, etc. The first step is to find a map in SVG format, I typically use simplemaps they have world and regional maps and they're free to use (check the license for details). Of course there are libraries for this purpose, also free ones, but not so many and they're pretty heavy as they bring a lot of functionalities, whereas I just need a simple map, so I like to make my own map, also because it's fun □. You know what I'm talking about right? Not a Google Maps map, but a simple and plain map with country borders. Now and then, on several web applications projects, I need to use maps to display data, sometimes it's a world map, sometimes a country map with regions and provinces, often I need a click-on-region event handler and I always need to display some data on the map as colors or numbers.
0 Comments
Leave a Reply. |