如何在 svg 圆圈内添加链接答案

【问题标题】：How to add a link inside an svg circle如何在 svg 圆圈内添加链接
【发布时间】：2018-06-07 21:03:22
【问题描述】：

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

【问题讨论】：

关于链接的实际问题很容易回答（如下所示），但是这种使用动画笔划-破折号过渡非常聪明，值得点赞:)

标签： html css svg

【解决方案1】：

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

注意，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>

【讨论】：

【解决方案2】：

我认为这会奏效：

<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 的链接。

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>

【讨论】：

如何使用 javascript 添加这个标签？
@Vishnu 这是操纵DOM 元素的直接方法。检查编辑的答案。如果您使用jQuery，这很容易。希望对您有所帮助。

【解决方案3】：

非常简单！..

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

初始化链接，
插入 svg，
关闭 svg，
关闭链接

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

【讨论】：