Как добавить ссылку внутри круга SVG

#javascript #html #css #svg #анимация

Я нарисовал круг, используя svg. Этот круг имеет эффект :hover.
Я хотел бы добавить ссылку внутри круга и для текста ссылки изменить цвет при наведении
курсора. 

Ниже мой код:   



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;
}




    

Ответы

Ответ 1

Вам нужно добавить  элемент, завернутый в ссылку .
Обратите внимание, что  элемент, находящийся поверх круга, заблокирует действие
наведения на тексте в круге. Поэтому я обернул все это в группу  и сделал :hover
на группу.   



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;
}





Источник: How to add a link inside an svg circle @Paulie_D


Ответ 2

Ответ с динамическим добавлением ссылки

Я думаю, что это сработает: 








Динамическое добавление ссылки на SVG Circle с помощью JS  



function addAnchor(){
  var dummyElement = document.createElement("div");
  dummyElement.innerHTML = '';
  
  var htmlAnchorElement = dummyElement.querySelector("a");

  var circleSVG = document.getElementById("circle");

  htmlAnchorElement.innerHTML = circleSVG.innerHTML;

  circleSVG.innerHTML = dummyElement.innerHTML;
  
}







Источник: How to add a link inside an svg circle @Jyothi Babu Araja