为什么此示例在Chrome中不能运行,但在Firefox中不起作用?
a{
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
display: block;
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
color: white;
text-decoration: none;
font-size: 2em;
letter-spacing: 4px;
}
a svg, a svg rect{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
fill: transparent;
}
a svg rect{
stroke: red;
stroke-width:10;
stroke-dasharray: 60 200;
stroke-dashoffset: 320;
transition: 2s;
}
a:hover svg rect{
stroke-dasharray: 200 60;
stroke-dashoffset:0;
transition: 10s;
}
<body bgcolor="black">
<a href="#"><svg><rect></rect></svg> click here</a>
</body>
我正在与svg悬停效果建立链接,但是svg在Firefox中不起作用。 在chrome中工作正常 谢谢你的帮助!