Search code examples
javascriptsvg

How to add page links to svg circle?

I have 5 circles and I need to add links to them

<svg viewBox="0 0 300 200"></svg>
Solution

  • You can just wrap your circles with a-tags, like you would do with most of the other elements in a html-document.

    <svg viewBox="0 0 300 100">
    <a href="/link1">
        <circle cx="50" cy="50" r="25"/>
    </a>
    <a href="/link2">
        <circle cx="125" cy="50" r="25"/>
    </a>
    <a href="/link3">
        <circle cx="200" cy="50" r="25"/>
    </a>
</svg>