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

Question

EffectAnim

我已经自杀了，试图用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

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

:active适用于链接。而且，除非您悬停在鼠标上，否则您无法拥有活动链接。 所以我假设你的意思是当选择菜单/选项卡项时。

以下是使用一点 CSS 和一点点 Javascript 来做到这一点的方法。 Javascript 所做的只是通过将一个类"active"添加到您单击的任何类中，将正确的<li>设置为活动。 您不必为此使用此确切代码。 例如，您可以使用 Angular 或 Vue 等 UX 库控制哪个<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>