is it possible to wrap an anchor tag around the circle element in an svg element?

Question

I am trying to make an svg circle a link. The following code is ineffective.

<svg height="100" width="100">
    <g>
        <a href="http://www.example.com" target="_blank">
            <circle cx="50" cy="50" r="10" fill="red"/>
        </a>
        <circle cx="80" cy="50" r="10" fill="red"/>
    </g>
</svg>

To take this further I have the following code in my document generated by JVectorMap http://jvectormap.com/. I would like to target each circle element using their data-index attributes and then adding a different anchor tag to each one.

<svg>
        <g>

            <circle data-index="0" cx="70.73386383731211" cy="105.63678160919538" fill="yellow" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>

            <circle data-index="1" cx="141.46772767462423" cy="176.3706454465075" fill="yellow" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>

            <circle data-index="2" cx="353.6693191865606" cy="388.57223695844385" fill="deeppink" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>

            <circle data-index="3" cx="212.20159151193636" cy="176.3706454465075" fill="green" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>

        </g>
</svg>

Is this possible?!

Thankyou.

Answer 1

see jsfiddle.

This is how you can add anchor tag around the circle element in svg element.

    <a xlink:href="http://www.example.com" target="_blank">
        <circle cx="50" cy="50" r="10" fill="red"/>
    </a>