悬停时的 SVG 圆形动画不起作用

Posted

技术标签:

【中文标题】悬停时的 SVG 圆形动画不起作用【英文标题】:SVG circle animation on hover doesn't work 【发布时间】:2021-01-12 12:56:35 【问题描述】:

当您将鼠标悬停在导航菜单按钮上时,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   class="svg">
              <circle cx="50" cy="10" r="4" stroke- class="symbol"/>
            </svg>
          </div>
          <li><a href="#">Work</a></li>
        </ul>
      </nav>

这是我在这里提出的第一个问题,如果我以一种更令人困惑的方式将它放在一起,那么请告诉我。 :)

【问题讨论】:

您正在使用 CSS 选择器跨越 shadow-dom 边界。这是无效的。 由于我只有 4 周的开发时间,我真的不明白你的答案。你能把它详细说明一下,像我这样的新手。 (对不起) nav ul li a:hover + .svg-container .symbol 部分引用符号,部分引用符号的父项,你不能这样做并让它工作。 所以我应该只引用符号? 可能还有其他问题,里面好像有很多东西,也许你可以进一步减少它。 【参考方案1】:

我看到一个问题:您有一个 div 元素作为列表 ul 的子元素。这不是有效的 html

我会将 svg 放在文本旁边的 a 元素中并执行

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

stroke-dasharraystroke-dashoffset 的值也太大。在您的情况下,要使用的值是:25.13。为了知道使用什么值,您可以将圆的周长计算为 2 * Math.PI * 4 其中 4 是圆的半径。

另一个错误是 svg 元素的大小:width="100" height:"100" 当圆的半径为 r="4" 我会使用 20x20 的 svg 元素。

为清楚起见,我简化了您的代码:

ul lidisplay:inline-block; text-align:center;padding:0 1em;
acolor:white;
bodybackground: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    class="svg">
     <circle cx="10" cy="10" r="4" stroke- class="symbol" stroke="gold" fill="none"/>
  </svg></a>
  </li>
  <li>
<a href="#"><span>bbbbbbb</span><br>
<svg    class="svg">
     <circle cx="10" cy="10" r="4" stroke- class="symbol" fill="none"/>
  </svg></a>
  </li>
</ul>

【讨论】:

我不明白为什么在我看来这么好的答案和详细的解释却没有投票赞成。支持好的答案总是会激发写新的答案

以上是关于悬停时的 SVG 圆形动画不起作用的主要内容,如果未能解决你的问题,请参考以下文章

悬停时的 SVG 不进行过渡

元素未显示并且:悬停在.svg上不起作用[重复]

当我在 SVG 中将鼠标悬停时,如何显示和隐藏同级元素?

悬停时的Jquery不起作用

嵌入在对象元素中的 SVG 上的鼠标指针悬停/jquery 单击事件不起作用

CSS悬停在初始动画后不起作用