Question

我试图用SVG制作动画已经自杀了，但我不明白它是如何工作的，也无法获得有关它的良好信息。

我想做的是，当元素Li处于活动状态或悬停时，SVG会在1秒的时间内更改点的字符串。

我尝试使用CSS并做了一些工作，但无法使它们具有响应能力。

这个想法是在进行悬停时或在d="M 299 50 C 299 50 303 22 272 22 L 269 22 C 269 22 241 22 241 50 C 241 78 270 78 270 78 L 272 78 C 303 78 299 50 299 50 Z"处于活动状态时，将坐标d="M 300 0 C 300 0 301 22 272 22 L 28 22 C 28 22 0 22 0 50 C 0 78 29 78 29 78 L 272 78 C 301 78 300 100 300 100 Z"更改为坐标Li。请记住响应式设计。

如果您有任何可以支持我的文档，那就太好了

<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
  <defs>
    <style>
      .cls-1 {
        fill: #29abe2;
      }
    </style>
  </defs>
  <title>Mesa de trabajo 1</title>
  <path class="cls-1" d="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z">
    <animate 
      attributeName="d"
      from="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z"
      to="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" 
      dur="5s"
      repeatCount="indefinite"/>
  </path>
</svg>

Answer 1

我认为我没有正确解释自己。我想要的是在:Hover中输入li或:active
时开始效果

:active适用于链接。除非您一直悬停，否则您将无法拥有活动链接。因此，我假设您的意思是选择菜单/选项卡项目时。

这是使用少量CSS和少量Javascript来实现的方法。通过向您单击的任何一个类添加“活动”类，所有Javascript都将正确的<li>设置为活动。您不必为此使用确切的代码。例如，您可以使用UX库（例如Angular或Vue）来控制哪个<li>元素具有该类。

其余部分的工作原理在代码本身中进行了解释。

希望这会有所帮助。

// Add a click handler for each <li>
document.querySelectorAll("ul.menu li").forEach(function(item) {
  item.addEventListener("click", function(evt) {
    // When user clicks on an LI, we give it the class "active" and
    // remove the class "active" from the last one (if any) that had it.
    clearActive();
    evt.target.closest("li").classList.add("active");
  })
});

// Remove the class "active" from all <li> elements
function clearActive() {
  document.querySelectorAll("ul.menu li").forEach(function(item) {
    item.classList.remove("active");
  });
}

.cls-1 {
  fill: #29abe2;
}

/* Hide the second path ("open") by default. */
ul.menu li svg .open {
  display: none;
}

/* When SVG has class "active" we hide the animated path, and show the second static one. */
ul.menu li.active svg .anim {
  display: none;
}

ul.menu li.active svg .open {
  display: block;
}



ul.menu {
  list-style: none;
  width: 200px;
}

<ul class="menu">
  <li>
    <svg viewBox="0 0 300 100">
      <path class="cls-1 anim" d="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z">
        <animate 
          attributeName="d"
          to="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" 
          dur="1s"
          begin="mouseover"
          fill="freeze"/>
        <animate 
          attributeName="d"
          to="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z"
          dur="1s"
          begin="mouseout"
          fill="freeze"/>
      </path>
      <!-- A second version of the path that has the destination shape. We will display this when SVG has the "active" class. -->
      <path class="cls-1 open" d="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" />
    </svg>
  </li>
  
  <li>
    <svg viewBox="0 0 300 100">
      <path class="cls-1 anim" d="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z">
        <animate 
          attributeName="d"
          to="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" 
          dur="1s"
          begin="mouseover"
          fill="freeze"/>
        <animate 
          attributeName="d"
          to="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z"
          dur="1s"
          begin="mouseout"
          fill="freeze"/>
      </path>
      <path class="cls-1 open" d="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" />
    </svg>
  </li>
  
  <li>
    <svg viewBox="0 0 300 100">
      <path class="cls-1 anim" d="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z">
        <animate 
          attributeName="d"
          to="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" 
          dur="1s"
          begin="mouseover"
          fill="freeze"/>
        <animate 
          attributeName="d"
          to="M299,50s4-28-27-28h-3s-28,0-28,28,29,28,29,28h2c31,0,27-28,27-28Z"
          dur="1s"
          begin="mouseout"
          fill="freeze"/>
      </path>
      <path class="cls-1 open" d="M300,0s1,22-28,22H28S0,22,0,50,29,78,29,78H272c29,0,28,22,28,22Z" />
    </svg>
  </li>
  
</ul>

激活或悬停时对Svg路径D坐标进行动画处理

1 个答案: