Я пытаюсь создать анимацию круга 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>
Как сделать анимацию бордюра круга при наведении на пункт меню?
Свободный перевод вопроса SVG circle animation on hover doesn't work от участника @Andreas Dahl Trankjær.