活动或悬停时动画 Svg 路径 D 坐标

Question

我在尝试使用 SVG 制作动画时自杀了，但我不明白它是如何工作的，也无法获得有关它的有用信息。

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

我试过 CSS 我做了一些事情，但我无法让它们响应。

想法是在悬停或 Li 处于活动状态时将坐标 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"。牢记响应式设计。

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

<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

I think I don't explain myself correctly. What I want is for the effect to start when the li is entered in :Hover or when it is :active

:active 适用于 links。并且你不能有一个活动的 link 除非你一直在徘徊。所以我假设你的意思是当 menu/tab 项目被选中时。

这里是如何用一点点 CSS 和一点点 Javascript 来做的。 Javascript 所做的就是通过向您单击的任何一个添加 class "active" 来将正确的 <li> 设置为活动状态。您不必为此使用这个确切的代码。例如，您可以使用 UX 库（例如 Angular 或 Vue.

来控制哪个 <li> 元素具有那个 class

代码本身解释了它的其余部分是如何工作的。

希望对您有所帮助。

// 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 坐标

Animate Svg Path D coordinates when active or in hover

html

css

svg

svg-animate