Анимация круга SVG при наведении не работает

#animation #svg #geometry #hover

#Анимация #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>

Это мой первый вопрос здесь, поэтому поделитесь со мной, если я собрал его более запутанным способом. 🙂

1. Вы пересекаете границу shadow-dom с помощью вашего CSS-селектора. Это недопустимо.

2. Поскольку я занимаюсь разработкой всего 4 недели, я не совсем понимаю ваш ответ. Не могли бы вы рассказать об этом новичку вроде меня. (sry)

3. навигатор: hover .svg-container .symbol частично ссылается на символ, а частично на родителей символа, вы не можете этого сделать и заставить его работать.

4. Значит, я должен ссылаться на него только на символ?

5. Могут быть и другие проблемы, кажется, там много чего, возможно, вы могли бы сократить это дальше.

Ответ №1:

Я вижу одну проблему: у вас есть div элемент в качестве дочернего элемента списка ul . Это недопустимый HTML.

Я бы поместил svg внутри a элемента рядом с текстом и сделал

 a:hover > svg .symbol{
  stroke-dashoffset: 0;
}

Также значение для stroke-dasharray и для stroke-dashoffset слишком велико. В вашем случае будет использоваться значение: 25.13 . Чтобы узнать, какое значение использовать, вы можете рассчитать периметр круга как 2 * Математическое значение.PI * 4, где 4 — радиус окружности.

Еще одна ошибка связана с размером элемента svg: width="100" height:"100" когда круг имеет радиус r="4" , я бы использовал элемент svg размером 20×20.

Для наглядности я упростил ваш код:

 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>

1. Я не понимаю, почему такой хороший ответ, на мой взгляд, с подробными объяснениями, остался без голосов «За». Поддержка хороших ответов всегда вдохновляет на написание новых ответов