CODEWITHSUNDEEP
htmlcsssvghyperlink
steamfunk
steamfunk

Reputation: 319

How to add a link inside an svg circle

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>

Upvotes: 19

Views: 44812

Answers (4)

Muisca
Muisca

Reputation: 153

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>

Upvotes: 1

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10292

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>

Upvotes: 17

prince
prince

Reputation: 31

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>

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115175

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>

Upvotes: 25

Related Questions