Question

我是SVG和HTML5上的路径的新手，尝试动画时遇到一些问题：

在下一个链接中，我正在尝试做的事情的预览：http://jsfiddle.net/fxwL68hr/1/

问题是：仅适用于Google Chrome和Firefox开发人员版。

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

Answer 1

下一个链接是：CodePen with my solution 我不太确定你会喜欢它。

在HTML中，我添加了一个../../...etc元素，其目标路径为三角形3和4：

defs

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

<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>

这是一篇博客文章，我在其中解释代码：Morphing in SVG - first steps

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

您可能想阅读这篇文章：Transforms on SVG Elements

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

Answer 2

始终存在从一个三角形到另一个三角形的有限变换。其背后的数学原理并不简单，但是您可以对诸如Inkscape之类的泛型转换工具稍作改动，即可找到它。这样，我可以了解以下内容：

三角形3：matrix(0, 1.92308, -1,0.634615, 75, -120.673)
三角形4：matrix(0, -2.14286, 2.98507, -2.30277, -123.881, 352.708)

附录：我已经完成了适当的数学运算。我什至已经在另一个答案Draw circle svg orthogonal projections的上下文中描述了它。在该答案中，使用了三个点来描述一个经过正交投影的正方形，其数学内容就是这样：将三个单独的点（不在一行中）作为源，将另外三个点（相同约束）作为目标，并且该答案中引用的函数generate()将为您提供转换矩阵。

动画必须在中立的matrix(1, 0, 0, 1, 0, 0)和上方的transform属性之间运行。看到它在此fiddle中正常工作。

缺点：根据Can I Use，IE不支持对SVG元素进行CSS转换，但是对于您的前两个三角形也是如此。

此外，为什么不使用CSS transition而不是animation？您从一种状态转到第二种状态，然后又返回。描述基本状态和悬停状态，其余transition: transform 1s ease完成。

在所有浏览器中对svg路径进行动画处理

2 个答案: