在 SVG 中,哪个更轻:多边形(polygon)还是路径(path)?

阅读时长 2 分钟读完

SVG 是一种基于 XML 的标记语言,用于创建可缩放矢量图形。在 SVG 中,有多种方法可以绘制形状,包括多边形和路径。但是,当需要在性能和效率之间做出权衡时,选择正确的元素非常重要。

多边形

多边形是由多个点连接而成的封闭形状。在 SVG 中,多边形使用 polygon 元素来定义。下面是一个简单的例子:

上面的代码会在 SVG 中创建一个齐角三角形。points 属性是一个由坐标组成的列表,它定义了多边形的顶点。在这个例子中,我们指定了三个点:(10,10),(90,10) 和 (50,90)。

路径

路径是由线段和曲线段构成的任意形状。在 SVG 中,路径使用 path 元素来定义。下面是一个简单的例子:

上面的代码会在 SVG 中创建一个与前面的多边形相同的齐角三角形。d 属性是一个路径字符串,它定义了路径的形状。在这个例子中,我们使用 M 命令移动到起始点 (10,10),然后使用 L 命令绘制线条到下一个点,一直画到最后一个点,最后使用 Z 命令连接第一个点和最后一个点。

性能和效率

当涉及到性能和效率时,多边形比路径更轻量级。这是因为多边形只需要存储顶点坐标,而路径需要存储每个线条和曲线段的详细信息。此外,由于多边形是封闭的,因此浏览器可以更容易地对其进行优化和渲染。

但是,在某些情况下,路径可能比多边形更适合。例如,如果您需要绘制非常复杂的形状,路径可以提供更大的灵活性和精度。

示例代码

下面是一个通过多边形和路径来绘制简单图形的完整示例:

注意,这个例子中的路径与多边形相同。如果您需要绘制更复杂的形状,可以尝试使用更多的路径命令和参数。

结论

在 SVG 中,多边形比路径更轻量级,并且对于简单的形状而言,它们通常是更好的选择。但是,对于非常复杂的形状,路径可以提供更大的灵活性和精度。请根据您的具体需求决定使用哪种元素。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/31330

纠错
反馈