Question

我想学习SVG，并试图通过使用点（使用多边形）或通过路径（路径）动态地学习如何渲染相同的图像。

我想在BOTH SVG多边形和SVG路径中使用SAME多边形（三角形，正方形和五边形足以开始）的一些示例，以便我可以比较代码。我可以找到由其中任何一个绘制的单个图像，但没有一个是相同的。

Answer 1

这很简单：您基本上可以使用多边形的points属性，并通过预先添加d并附加M将其转换为路径的z属性。 see live on jsFiddle：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <polygon points="20,20 100,20 100,100 30,110"/>
  <path        d="M20,20 100,20 100,100 30,110z" fill="green" transform="translate(100,0)"/>
</svg>

Answer 2

<块引用>

两者都可以创建形状。多边形将自动关闭形状你（通过返回到第一点）绘制至少三个边，由一系列相连的直线组成，意味着它不能很好地扩展。

路径可以使用直线或曲线，并且不会自动关闭为你塑造。路径可能是最强大的基本形状元素在 SVG 中。

Source

SVG中路径与多边形绘制的多边形示例

2 个答案: