Is there any way to make an SVG object clickable?

Question

I'm working with the SVG that can be viewed here: http://n1t2.info/

I would just post the SVG, but because of the street maps layer the file is extremely large. However, you can see if you click the link that it's a map divided into 18 different svg paths, with a number of different colors shading them. My goal with this map is to make each of the 18 different sections clickable, or be able to give them an <a href="example.com">. Is this possible with SVGs at all?

edit: A comment suggested a show the way that I'm constructing the SVG file. You can see my method for that here.

Can you edit your question to show how you're drawing the svg image? — Miles Grimes, Dec 15 '15 at 01:33
Are you able to edit the `` element manually? So you can asign an `id="zone1"` for each zone? — Frondor, Dec 15 '15 at 02:26
Yes indeed, @Frondor . In fact, that's how I originally wrote the code to change the fill depending on the income info for that area :-) — n1c9, Dec 15 '15 at 02:27
I have a solution but it is based on jquery.. is it ok for you to use jquery or you prefer just pure javascript? — Frondor, Dec 15 '15 at 02:48
At this point, I'll take anything that can get the job done! :-) — n1c9, Dec 15 '15 at 02:49

Frondor · Answer 1 · 2015-12-15T03:04:50.857

2

You can handle it pretty easily by adding a data attribute to each <path> element and then handle it via jquery or just javascript.

First, add something like data-url="http://your-url.com" to the <path> element. Example: <path data-url="http://your-url.com">.

Add jquery library just before the closing of your </body> tag, and the script in step #3 just like:

                <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
                <script>
                        //your script
                </script>
        </body>
</html>

instead of //your script you'll paste this one:

$(document).ready(function(){
        $('path').on('click', function(e){
            e.preventDefault();
            var url = $(this).data('url');
            console.log('Moving to:', url);
            window.open(url, '_blank');
        });
});

Test it: http://jsfiddle.net/jpvu852d/

edited Dec 15 '15 at 03:04

answered Dec 15 '15 at 02:57

Frondor

3,466
33
45

1

@n1c9 In case you are trying to implement this question **before** my last edit, please take a look at the code, it changed a bit :) I hope you know how to deal with javascript libraries like jquery – Frondor Dec 15 '15 at 03:07
I know a little here and there :-) but thanks for giving me another excuse to learn more, and thanks for the great answer! – n1c9 Dec 15 '15 at 03:17
http://stackoverflow.com/questions/15532371/do-svg-docs-support-custom-data-attributes – Kaiido Dec 15 '15 at 03:35

score 2 · Accepted Answer · answered Dec 15 '15 at 03:41

2

IMO, the best solution is the SVG <a> element.

<svg width="200" height="200" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <a xlink:href="http://stackoverflow.com/questions/15532371/do-svg-docs-support-custom-data-attributes">

    <path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3"></path>

  </a>

</svg>

answered Dec 15 '15 at 03:41

Kaiido

123,334
13
219
285

1

Perfect! Thanks, @Kaiido! – n1c9 Dec 15 '15 at 03:46

score 0 · Answer 3 · answered Dec 15 '15 at 02:18

0

A search on google turned up this jQuery plugin for decorating image maps that may help you achieve your goal:

http://www.outsharked.com/imagemapster/default.aspx?what.html

answered Dec 15 '15 at 02:18

PeterTheLobster

1,386
16
33

Is there any way to make an SVG object clickable?

3 Answers3