javascript - 如何解释 raphael 中的 SVG <line>？

Question

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

有什么想法吗？

Answer 1

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

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

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

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