【问题标题】:Cleanly morph SVG paths干净地变形 SVG 路径
【发布时间】:2012-08-07 07:27:18
【问题描述】:

在this fiddle 中,我试图通过简单地扩展上升器将小 H 变形为大 H。我认为这就像提供新路径并让 Raphael 发挥其魔力一样简单,但显然情况并非如此。

有没有一种简单的方法来拉长上升器而无需先将其损坏?请注意,这是一个更大的徽标中的一个动态部分。

【问题讨论】:

  • 你看过here吗?它可能有助于通过创造性地接近动画过程来回避这一点-查看源代码以了解它们是如何做到的(尽管我看不到实现您所追求的目标的方法,因为路径动画已硬连线到实现中) .
  • 是的,我已经看过了,特别是在平滑变成三角形的正方形上,但无法确定是什么造成的。
  • 看来这种机制非常不透明。另一个想法是水平切割徽标并为上半部分和下半部分使用单独的形状(和路径),这样你就可以只缩放顶部(因为我假设你的目标是)。跨度>
  • 我也考虑过,但即使这样也有同样的问题,因为“增长”上升器要么涉及缩放要么变形,这将导致相同类型的乱码
  • 单独缩放不会做到这一点。您甚至可以保持衬线未损坏,仅缩放中高范围。

标签: svg raphael


【解决方案1】:

据我从绘制路径中看到的,这两个形状不是从同一个起点绘制的 - 所以你正在弄乱。

SVG 动画将始终尝试将起始形状的第一段变形为结束形状的第一段。如果绘制顺序不同,那么您会得到与您所看到的一样的奇怪效果。

(请注意,开始和结束形状中的段数和路径类型的顺序必须相同。)

【讨论】:

  • 哦……这很有道理。所以我所要做的就是确保顺序相同。嗯好的谢谢。我会试试这个
猜你喜欢
  • 1970-01-01
  • 2016-12-26
  • 1970-01-01
  • 2018-04-20
  • 2020-05-16
  • 2018-04-24
  • 1970-01-01
  • 1970-01-01
  • 2016-10-23
相关资源
最近更新 更多