5

Я нарисовал круг, используя 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;
}
<svg id="circle">
    <circle cx="125" cy="125" r="100" stroke="darkblue" stroke-width="3"     fill="green" />
 </svg>

Свободный перевод вопроса How to add a link inside an svg circle от участника @steamfunk.

1

2 ответа 2

4

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

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

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

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

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>

Свободный перевод ответа от участника @Jyothi Babu Araja.

4

Нужно добавить <text> элемент, завернутый в ссылку <a>.
Обратите внимание, что <text> элемент, находящийся поверх круга, заблокирует действие наведения на тексте в круге. Поэтому я обернул все это в группу <g> и сделал :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;
}
<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>

Свободный перевод ответа от участника @Paulie_D.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.