如何在SVG圆形内添加链接

Question

如何在SVG圆形内添加链接

19

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>

- steamfunk

关于链接的实际问题很容易回答（如下），但这种使用动画划破转换的方法非常聪明，值得点赞 :) - brichins

4个回答

17

我认为这将起作用：

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

- Jyothi Babu Araja

我该如何使用JavaScript添加这个a标签？ - Vishnu

@Vishnu 这是一种直接操作 DOM 元素的方法。请查看编辑后的答案。如果你使用 jQuery，那么就非常容易了。希望这能帮到你。 - Jyothi Babu Araja

3

非常简单！只需将整个SVG包含在链接中即可...这对我有效！！

初始化链接，
插入SVG，
关闭SVG，
关闭链接。

    <a href="https://dev59.com/11sW5IYBdhLWcg3wdW6T"> <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>

- prince

1

非常简单。在标签元素中添加onClick属性，使用inLine事件处理程序。事件处理程序不仅适用于HTML对象，如DIV、TR、P、TABLE等。

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>

- Muisca

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Harrison

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paulie_D · Accepted Answer

你需要添加一个被锚链接包裹的text元素。

请注意，由于text元素位于circle之上，它会阻止悬停操作在该圆圈上进行。所以，我将整个内容都包裹在一个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>