Html 如何在 svg 圈内添加链接

How to add a link inside an svg circle

提问by steamfunk

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 画了一个圆圈。这个圆圈有悬停效果。我想在圆圈内添加一个链接，并且链接文本会随着悬停效果而改变颜色。

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>

回答by Paulie_D

You need to add a textelement wrapped in an anchor link.

您需要添加一个text包含在锚链接中的元素。

Note, the textelement, being on top of the circlewill block the hover action on that circle. So, I've wrapped the whole thing in a ggroup and placed the hover capture on that instead.

请注意，text位于 之上的元素circle将阻止该圆圈上的悬停操作。所以，我已经将整个东西包裹在一个g组中，并将悬停捕获放在它上面。

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>

回答by Jyothi Babu Araja

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.

编辑：动态添加链接到 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>

回答by prince

very simple!..

很简单！..

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

只需将整个 SVG 包装在一个链接中......无论如何这对我有用！！

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

1. 初始化链接，
2. 插入 svg，
3. 关闭 svg，
4. 关闭链接

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