如何解决悬停时的SVG圆形动画不起作用
当您将鼠标悬停在以下站点上的导航菜单按钮上时，Atm试图重新创建SVG圆动画：https://5scontent.com/。在我的网站上，圆圈在刷新时出现，然后消失。
* {
margin: 0;
padding: 0;
font-family: 'Alata';
}
.container {
width: 100%;
min-height: 100vh;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: black;
position: relative;
z-index: 1;
}
.navbar {
width: 90%;
height: 10vh;
margin: auto;
display: flex;
align-items: center;
}
.logo {
width: 120px;
cursor: pointer;
}
nav {
flex: 1;
text-align: right;
}
.svg-container{
position: absolute;
}
.svg{
position: absolute;
top: 0px;
left: 1125px;
}
.symbol {
fill: transparent;
stroke: white;
stroke-width: 1px;
stroke-dasharray: 150;
stroke-miterlimit: 10;
stroke-dashoffset: 150;
transition: all 3s linear;
}
nav ul li a:hover + .svg-container .symbol{
stroke-dashoffset: 0;
}
nav ul li {
list-style: none;
display: inline-block;
margin-left: 60px;
}
nav ul li a{
text-decoration: none;
color: white;
font-size: 14px;
padding: 5px 2px;
}<body>
</div>
<div class="container">
<div class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<div class="svg-container">
<svg width="100" height="100" class="svg">
<circle cx="50" cy="10" r="4" stroke-width="4" class="symbol"/>
</svg>
</div>
<li><a href="#">Work</a></li>
</ul>
</nav>这是我的第一个问题，如果我以一种更加混乱的方式将其组合在一起，就不要理我了。 ：）
解决方法
我看到一个问题：您有一个div元素作为列表ul的子元素。这是无效的HTML。
我会将svg放在文本旁边的a元素内，然后做
a:hover > svg .symbol{
stroke-dashoffset: 0;
}
stroke-dasharray和stroke-dashoffset的值也太大。在您的情况下，要使用的值为：25.13。为了知道使用什么值，您可以将圆的周长计算为2 * Math.PI * 4，其中4是圆的半径。
另一个错误是svg元素的大小：width="100" height:"100"，当圆的半径为r="4"时，我将使用20x20的svg元素。
为清楚起见，我简化了您的代码：
ul li{display:inline-block; text-align:center;padding:0 1em;}
a{color:white;}
body{background:black;color:white}
.symbol {
stroke: white;
stroke-dasharray: 25.13;
stroke-dashoffset: 25.13;
transition: all 1s linear;
}
a:hover > svg .symbol{
stroke-dashoffset: 0;
}<ul>
<li>
<a href="#"><span>aaaaaaa</span><br>
<svg width="20" height="20" class="svg">
<circle cx="10" cy="10" r="4" stroke-width="1" class="symbol" stroke="gold" fill="none"/>
</svg></a>
</li>
<li>
<a href="#"><span>bbbbbbb</span><br>
<svg width="20" height="20" class="svg">
<circle cx="10" cy="10" r="4" stroke-width="1" class="symbol" fill="none"/>
</svg></a>
</li>
</ul>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。