Search code examples
javascriptsvgsnap.svg

Clickable link on a SVG circle, text or line

Using snapsvg.io, I would like to know if it's possible to add a clickable link such as a <a href="somelink.com"/>My Link</a> tag to an SVG text, circle or line.

An example here I have is text:

var s = Snap("#svg");
var text = s.text(x + 10, y - 5, 'My Text');
text.attr({
        fill: doesExist ? alert : textColorOK,
        fontSize: '10px',
        'font-weight': '600',
        'font-family': 'Arial Narrow, sans-serif',
        'text-anchor': 'start',
        cursor: doesExist ? 'pointer' : 'default'
      });

I'd like to do this with snapsvg.io. Furthermore, I want to do this in plain JavaScript, not jQuery.

Solution

  • Appreciate the responses but ended up using a click event, say to a text element i.e.

    text.click(function () {
    window.location.href = "http://stackoverflow.com/";
});