19

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>

1
  • The actual question about linking is pretty easy to answer (as below), but this use of an animated stroke-dash transitions is pretty clever and deserves an upvote :)
    – brichins
    Dec 5, 2016 at 17:44

4 Answers 4

25

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>

1
  • UPDATE: SVG "xlink" tags have since been deprecated. Just replace "<a xlink:href=" with "<a href="
    – Sam Sabin
    Nov 14, 2022 at 7:00
17

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>

2
  • How do i add this a tag using javascript?
    – Vishnu
    Apr 27, 2018 at 9:31
  • @Vishnu It's straight forward approach manipulating DOM elements. Check the edited answer. If you using jQuery it's quite easy. Hope that helps. Apr 27, 2018 at 14:33
3

very simple!..

just wrap the entire SVG in a link...this worked for me anyway!!

  1. initialise the link,
  2. insert svg,
  3. close svg,
  4. close link

    <a href="http://stackoverflow.com/questions/34968082/how-to-add-a-link-inside-an-svg-circle#"> <svg style="align-self: center" height="125" width="190" </a>>
    <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>

1

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>

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Harrison
    Dec 8, 2022 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.