如何在svg圈子里添加一个链接 [英] How to add a link inside an svg circle
本文介绍了如何在svg圈子里添加一个链接的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我用svg画了一个圆圈。这个圈子有悬停效果。我想在圆圈内添加一个链接,并在链接文本中随着悬停效果一起更改颜色。
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>
推荐答案
您需要添加一个包含在锚链接中的 text 元素。
You need to add a text
element wrapped in an anchor link.
注意, code> text 元素位于圆圈顶部
会阻止该圆上的悬停动作。所以,我把所有东西都包装在一个 g
组中,然后把悬停捕获放在那个上面。
Note, the text
element, being on top of the circle
will block the hover action on that circle. So, I've wrapped the whole thing in a g
group and placed the hover capture on that instead.
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>
这篇关于如何在svg圈子里添加一个链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文