html中的圆圈链接,html – 如何在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;

}

google