Javascript 在所有浏览器中悬停时为svg路径设置动画

我是HTML5上SVG和路径的新手，我尝试制作的动画有一些问题：

在下一个链接中，它是我尝试做什么的预览：

问题是：只适用于谷歌浏览器和Firefox开发者版

---

总之：当我将SVG悬停时，所有三角形都会产生动画。然而，三角形3和4实际上改变了路径坐标以创建更大的三角形。如何在不使用css d:path（）的情况下为这些三角形中的坐标变化设置动画，以便它可以在所有（或至少大多数）浏览器中工作。

始终存在从一个三角形到另一个三角形的有限变换。这背后的数学是不平凡的，但只要稍微摆弄一下grafical转换工具（例如Inkscape），就可以找到它。这样，我得到了以下结果：

• 三角形3:

  矩阵（0,1.92308，-1,0.634615,75，-120.673）

• 三角形4:

  矩阵（0，-2.14286,2.98507，-2.30277，-123.881352.708）

附录：我现在已经做了适当的计算。我甚至已经在另一个答案的上下文中描述了它：。在这个答案中，三个点被用来描述一个经过正交投影的正方形，数学内容是这样的：取三个独立的点（不在一行中）作为源，另三个点（相同的约束）作为目标，函数

generate（）

该答案中引用的内容将为您提供变换矩阵

动画必须在中性

矩阵（1,0,0,1,0,0）

和作为

变换

属性的上述矩阵之间运行。看到它在这里面工作了吗

缺点：根据，IE不支持SVG元素上的CSS转换，但前两个三角形也是如此

另外，为什么不使用CSS而不是CSS呢？你从一种状态到另一种状态，然后再回到另一种状态。描述基本状态和悬停状态，然后过渡：transform 1s ease完成其余部分。

下一个链接是： 我不确定你会喜欢它

在HTML中，我添加了一个

defs

元素，其中包含三角形3和4的目标路径：

<svg id="svg" class="svg_bg" width="50%" viewBox="0 0 100 75">
  <defs>
    <path id="t3Target" d="M 100 75 L 0 0 L 0 75 Z" />
    <path id="t4Target" d="M 100 75 L 100 0 L 0 0 Z" />
  </defs>
    <path id="triangle1" class="triangle1" d="M 17.5 28.5 L 55 75 L 81 75 Z"></path>
    <path id="triangle2" class="triangle2" d="M 36.5 8 L 54.5 75 L 87 75 Z"></path>
    <path id="triangle3" class="triangle3" d="M 110 -25 L 38 75 L 77 75 Z"></path>
    <path id="triangle4" class="triangle4" d="M 49 75 L 84 75 L 120 41.5 Z"></path>
</svg>

对于三角形3和4，我使用JavaScript

let rid=null；
设shapesRy=[]；
阶级形态{
构造函数（路径a、路径b、变形路径）{
this.target=getArgsRy（路径a）；
this.vals=getArgsRy（路径b）；
this.morphingPath=morphingPath；
this.memory=[]；
for（设i=0；i{
s、 updateValue（）；
s、 updatePath（）；
})
}
svg.addEventListener(
“鼠标悬停”，
函数（）{
如果（rid）{
window.cancelAnimationFrame（rid）；
rid=null；
}   
shapesRy.map（（s）=>{
for（设i=0；i{
for（设i=0；i{
设argRy=arg
.切片（1）
.替换（/\-/g，“-”）
.split（/[，]+/）；
argRy.map（（p，i）=>{
如果（p==“”）{
argRy.拼接（i，1）；
}
});
for（设i=0；i

这是一篇我正在解释代码的博客文章：

三角形1和2（您的CSS）的CSS动画还有一个额外的问题，因为SVG元素上的CSS转换非常有缺陷

您可能想阅读本文：

---

或者，您可能希望对所有4个三角形使用JavaScript。

使用SMIL和fakesmile来支持IE/Edge@RobertLongson这“可能”对浏览器有帮助，但对如何在hover.FYI上启动动画没有帮助。在MacOS 10.13.6上，我在每个浏览器中都有完全不同的结果：Firefox（61.0.2）、Chrome（68.0.3440.106）和Safari（11.1.2）。所有悬停都有工作动画，但是每个浏览器中的片段旋转方式不同。通过onmouseover事件触发SMIL。我实际上首先想到了转换，但我正在练习动画，然后我就开始使用SVG。我真的不明白矩阵（）的含义，它如何应用到我的代码中？

matrix（）