如何在 raphael 中解释 SVG <line>？

Question

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

有什么想法吗？

Answer 1

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

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

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

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