javascript - 如何解释 SVG在拉斐尔？

Question

我一直在 illustrator 中制作一些插图，获取他们的 SVG 代码并使用 raphael.js 在屏幕上绘制它们，以便稍后在其上添加动画和交互性。当涉及到简单的形状和路径时，一切都很好。Path()、ellipse() 和 rec() 工作得很好。但是当我看到一个<line>提供 x1、y1、x2 和 y2 的元素时，我的 SVG XML 文件中有一些实例。我不知道我应该如何在拉斐尔中解释这一点并将其绘制到屏幕上。

有任何想法吗？

Answer 1

在 Raphael 中，您应该将线条转换为路径，这很简单......

paper.path( [ "M", x1, y1, "L", x2, y2 ] );

或者，如果您只想对值进行硬编码：

paper.path("M 10,10 L 30,30");