Creating interactive links with SVG map shapesWould you like to learn how to make

I'm currently working on a project that involves creating an interactive map of the United States. The idea is that when a user clicks on a state, they will be taken to a static page for that particular state (for example, Alaska). I need help figuring out how to wrap an anchor tag around this. Below is an example of one of the states I have mapped out. All the other states follow a similar pattern/structure. This is my first time working with SVG, so any advice or pointers would be greatly appreciated!

<g id="states">
      <g>
        <!-- Alaska -->
        <path id="map_1" fill="#EBECED" stroke="#FFFFFF" stroke-width="1" d="M336.6,199.5l-0.199,0.4l0.5,1.1l-3.301,32.399l0.9,17.5c1.6-0.399,2.4-0.699,2.4-1
        c-0.301-0.6-0.4-1.1-0.301-1.5c0.101-1.5,0.5-1.899,1.101-1.3c0.6,0.5,1,1.4,1.399,2.7c0.301,1.3,0.801,1.9,1.5,1.6
        c0.301-0.199,1-0.5,1.9-0.8c0.6-0.8,0.8-1.399,0.6-1.8c-0.3-0.5-0.3-1.1,0-1.7c0.301-0.7,0-1.2-0.8-1.5
        c-0.899-0.399-1.2-1.2-0.6-2.3h22.5c-0.4-1.6-0.601-2.7-0.3-3.3c0.199-0.7,0.199-2-0.301-3.8c-0.199-0.801-0.199-1.2-0.3-1.301
        c0-0.1,0.101-0.6,0.3-1.6c0.101-0.6,0.4-1.2,0.9-2c0.4-0.5,0.6-1.1,0.4-1.8c-0.101-0.7-0.5-1.5-0.9-2.4
        c-0.5-0.899-0.8-1.7-0.9-2.2l-3.8-25.399H336.6z"/>
      </g>
javascripthtmlcsssvginteractive

Answer №1

Switch out the <g> tag lacking an id attribute with an 

<a xlink:href="<wherever you would like to visit>">
and replace the closing </g> with </a> to transform the shape into a functional link.

Answer №2

If you want to easily achieve this, use JavaScript along with jQuery library

Add the tags for paths with attributes data-state="name_of_state" and data-url="your_link"

$('path').click(function () {
    alert($(this).attr('data-state'));
    window.location.href = $(this).attr('data-url');
});

For a demo, see this fiddle: http://jsfiddle.net/sameersemna/ddaypwjv/4/

Updated fiddle link here: http://jsfiddle.net/sameersemna/ddaypwjv/6/. Good luck! ;)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The challenge of synchronizing Javascript and PHP code

I am trying to trigger a JavaScript function with parameters retrieved from MySQL and have it execute on an onClick event. Below is the JavaScript code that I am using: function getFile() { if (window.XMLHttpRequest) { AJAX=new XM ...

phpjavascriptmysqlajax

Trigger an "onMouseMove" event when the "pointer-events-none" css property is applied to fire

Currently, I am dealing with a React Component that contains an absolutely positioned div overlaying other content within my application. This particular div is utilized to trigger react's onMouseMove event. My objective is to apply the CSS value poi ...

javascriptcssreactjsjsx

Exploring the jQuery Solution for Enhancing Dojo Widget Framework

My experience with Dojo in the past has been great, especially with its widget infrastructure. Being able to easily separate code and HTML content, having a seamless connection with the require system used by Dojo, and the convenient builder that compresse ...

javascriptjquerydojo

Using JavaScript to divide an associative array into separate arrays

I am dealing with an array of clubs var clubs =[{ team: {name: "fcb barca", rank: 4}, team: {name: "man utd", rank: 16}, team: {name: "man city", rank: 36}, team: {name: "fcb liverpool", rank: 57} }]; The task at hand is to separate this ...

javascriptarraysassociative-array

Leveraging code behind and serialized JSON in an ASP.NET web application

I've recently created an array using a LINQ query: var aTimeResultQuery = (from fct in context.fct_testautomation join dr in context.dim_driver on fct.driver_key equals dr.driver_key join tc in context.dim_test_case on fct.test_case_ ...

c#javascriptasp.netjson

Attempting to access a variable without wrapping it in a setTimeout function will

I have a form without any input and my goal is to automatically set the "responsible clerk" field to the currently logged-in user when the component mounts. Here's what I have: <b-form-select v-model="form.responsible_clerk" :op ...

javascriptvue.jsvuexbootstrap-vue

Flask integration with AJAX for a HTML range slider

I'm currently facing a challenge with my HTML control panel that features an array of buttons and sliders. While the buttons are fully functional and trigger post requests that are received and executed by my Python app, I'm encountering issues w ...

javascriptpythonajaxflaskslider

Utilize Bootstrap to expand a row with 24 responsive columns and fill the remaining vertical space

Hello everyone! This is my first time posting a question here, even though I've been relying on this site for solutions for several years now. I've encountered a "multi-row" issue that seems to be unique and hasn't been covered yet. Despite ...

cssflexboxbootstrap-5

NodeJS rendering method for HTML pages

We are in the process of developing a fully functional social networking website that will resemble popular platforms like Facebook or Instagram. Our plan is to utilize Node.js on the server side and we are currently exploring the best technology for rende ...

javascriptangularjsnode.jsreactjsisomorphic-javascript

What is the proper method for running a script using the Selenium JavascriptExecutor?

On my test.html page, I've included the following code snippet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> </head> <body> ...

javascriptseleniumselenium-webdriver

Can anyone provide a solution for the issue with bootstrap utilities?

Currently, I am using Vue3 with Vite and attempting to integrate Bootstrap into my project. While I have managed to implement most of it successfully, I encountered a significant error when trying to override Bootstrap-related variables. Can anyone offer a ...

cssvue.jssassvuejs3bootstrap-5

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique

My current time zone is GMT+8, and the AWS region I am using is Singapore (ap-southeast-1). I am facing an issue where there are discrepancies in date calculations between my local machine and when I deploy my code on AWS Lambda. My goal is to ensure that ...

javascriptnode.jsaws-lambda

Referencing a JSON object

Here is a JSON list of search terms: [ "halo", [ "halo reach", "halo anniversary", "halo 4", "halo 3", "halo mega bloks", "halo 2", "halo sleepsack", "halo wars", "halo reach xbox 360", "halo combat evolved" ], ...

javascriptjqueryjsonautocompletejsonp

Guide to locating and organizing multiple fields in various documents within MongoDB and aggregating them into a unified array

In the header, the issue is clearly defined. I have a collection called "results" containing multiple documents: { "_id" : "item_e4a2086048057ac9", "home" : "FH>87218379012", "username:" : "Jon Doe", "Apps" : { "game" : { ...

javascriptarraysmongodbsortingmongodb-query

Is it possible to transition to React without having a comprehensive understanding of JavaScript?

After building a foundation in JS, I am eager to delve into learning more about es6 and beyond. Would it be advisable for me to begin exploring React or Vue at this point? Since graduating recently, I have noticed that many companies value candidates who ...

javascriptreactjsvue.js

When an image is placed inside a parent div, the link should extend to the entire width of the div, rather than just hovering over

Essentially, I have a div that spans the entire width of its container, inside it is an image link. The image's width is set to adjust automatically with a fixed height of 600px. The link covers the whole width of the div, which in this case is the wi ...

htmlcssimagehyperlink

Using a JavaScript variable in a MongoDB query

i have: var optiontable = {1: 'attack', 2: 'defence', 3: 'intelligence'}; var option = 1; var minion = minions[thisminion]; // get correct, works. console.log(optiontable[option]); // would output "attack" var ...

javascriptmongodb

Error: Element type is invalid: a string was anticipated, but not found

I recently experimented with the example provided in React's documentation at this link and it functioned perfectly. My objective now is to create a button using material-ui. Can you identify what is causing the issue in this code? import * as R ...

javascriptreactjstypescriptmaterial-ui

JavaScript: Incorporating an operator into a specific object (instead of the entire class)

Are you familiar with how to include an operator in an object (rather than the entire class)? When it comes to a method, I know you can achieve that by: my_object.new_function = function(){return 1}; Then invoking my_object.new_function() will output ...

javascript

Issue with InversifyJS @multiInject: receiving an error stating "ServiceIdentifier has an ambiguous match"

Having an issue with inversifyJs while trying to implement dependency injection in my TypeScript project. Specifically, when using the @multiInject decorator, I keep receiving the error "Ambiguous match found for serviceIdentifier". I've been referenc ...

javascripttypescriptdependency-injectioninversifyjs