CODEWITHSUNDEEP
javascripthtmlcsssvginteractive
user3688814
user3688814

Reputation: 69

how to make clickable link with SVG map shapes

So I am creating an interactive map of the US, where upon clicking on a state, my site will take you to a static page for that state (this example, Alaska). My question is how do I wrap an anchor tag around this? Here is an example of one of the states I have. all the other states follow the same pattern/structure. I've never had to deal with this before as this is my first time working with SVG so any advice / pointers would be great! 

<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>

Upvotes: 2

Views: 3446

Answers (2)

Sameer Shemna
Sameer Shemna

Reputation: 906

Thats easy just use Javascript preferably with jQuery

give the path tags an attribute 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');
});

Check the fiddle: http://jsfiddle.net/sameersemna/ddaypwjv/4/

Updated fiddle: http://jsfiddle.net/sameersemna/ddaypwjv/6/ All the very best ;)

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 123995

Replace the <g> element that has no id attribute with an <a xlink:href="<wherever you want to go to>"> and the </g> by </a> that will turn the shape into something that works as a link.

Upvotes: 2

Related Questions