我用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>
解决方法
您需要添加包含在锚链接中的文本元素.
请注意,位于圆圈顶部的文本元素将阻止该圆圈上的悬停操作.所以,我把整个事情包装在一个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>
