How to add a link inside an svg circle - html

Question

I have drawn a circle using svg. This circle has a hover effect. I would like to add a link within in the circle and for the link text to change color along with the hover effect.
svg#circle {
height: 250px;
width: 250px;
}
circle {
stroke-dasharray: 700;
stroke-dashoffset: 700;
stroke-linecap: butt;
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-ms-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
}
circle:hover {
fill: pink;
stroke-dashoffset: 0;
stroke-dasharray: 700;
stroke-width: 10;
}
<svg id="circle">
<circle cx="125" cy="125" r="100" stroke="darkblue" stroke-width="3" fill="green" />
</svg>

Answer 1

You need to add a text element wrapped in an anchor link.
Note, the text element, being on top of the circle will block the hover action on that circle. So, I've wrapped the whole thing in a g group and placed the hover capture on that instead.
svg#circle {
height: 250px;
width: 250px;
}
g circle {
stroke-dasharray: 700;
stroke-dashoffset: 700;
stroke-linecap: butt;
-webkit-transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
-ms-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
}
g:hover circle {
fill: pink;
stroke-dashoffset: 0;
stroke-dasharray: 700;
stroke-width: 10;
}
text {
fill: pink;
font-size: 24px;
}
a:hover text {
fill: blue;
}
<svg id="circle">
<g>
<circle cx="125" cy="125" r="100" stroke="darkblue" stroke-width="3" fill="green" />
<a xlink:href="https://www.google.co.uk/" target="_top">
<text x="50%" y="50%" style="text-anchor: middle">google</text>
</a>
</g>
</svg>

Answer 2

I think this will work :
<svg id="circle">
<a xlink:href="https://www.google.com" style="cursor: pointer" target="_blank">
<circle cx="125" cy="70" r="60" stroke="darkblue" stroke-width="3" fill="green" />
</a>
</svg>
EDIT: Dynamically adding link to SVG Circle.
function addAnchor(){
var dummyElement = document.createElement("div");
dummyElement.innerHTML = '<a xlink:href="https://www.google.com" style="cursor: pointer" target="_blank"></a>';
var htmlAnchorElement = dummyElement.querySelector("a");
var circleSVG = document.getElementById("circle");
htmlAnchorElement.innerHTML = circleSVG.innerHTML;
circleSVG.innerHTML = dummyElement.innerHTML;
}
<svg id="circle">
<circle cx="125" cy="70" r="60" stroke="darkblue" stroke-width="3" fill="green" />
</svg>
<button onclick="addAnchor()">Add Anchor</button>

Answer 3

very simple!..
just wrap the entire SVG in a link...this worked for me anyway!!
initialise the link,
insert svg,
close svg,
close link
<svg style="align-self: center" height="125" width="190" >
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="3%" style="stop-color:rgb(255,255,0);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#000066" font-size="40" font-family="Verdana" x="50" y="86">MBS</text>
Sorry, your browser does not support SVG.
</svg> </a>

Answer 4

Very, Very Simple. Add onClick in tag element,
Using the inLine event handler.
Event handlers are not only for HTML objects, like DIV, TR, P, TABLE, etc.
https://www.w3schools.com/jsref/event_onclick.asp
<svg>
<circle onClick="location.href='https://stackoverflow.com'" cx="50" cy="50" r="25" stroke="darkblue" stroke-width="3" fill="green" />
</svg>