Is there any way to make an SVG object clickable?

- 1 answer


I'm working with the SVG that can be viewed here:

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 target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="">. 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.




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

<svg width="200" height="200" viewBox="0 0 400 400" xmlns="" xmlns:xlink="">

  <a xlink:target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="">

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