SVG 基本形状：rect、circle、path

SVG 使用一种坐标系，其中 (0,0) 位于左上角。X 向右递增，Y 向下递增。视口由宽度和高度属性定义；坐标空间由 viewBox 属性定义。

使用 <rect x="10" y="10" width="200" height="100" rx="8" ry="8"> 绘制矩形。两个圆角半径属性用于将角变圆。填充和描边由相应属性或 CSS 控制。省略位置属性时，默认值为 0,0。

使用 <circle cx="100" cy="100" r="50"> 绘制圆形。前两个属性指定圆心坐标，另一个属性指定半径。SVG 圆形没有等同于画布弧线角度参数的设置——它们始终是完整的圆。

使用 <ellipse cx="100" cy="100" rx="80" ry="40"> 绘制椭圆。前一个半径属性表示水平半径，后一个表示垂直半径。两个半径相等的椭圆等同于圆形。

<line x1="0" y1="0" x2="100" y2="100"> 绘制一条线段。<polyline points="0,0 100,50 200,0"> 根据一系列坐标对绘制相互连接的线段。两者都不会自动闭合。

<polygon points="100,10 190,190 10,190"> 类似于折线，但形状会自动闭合——最后一个点与第一个点之间会连接一条线。对于三角形、星形和其他规则多边形等闭合形状，请使用多边形。

路径是 SVG 中功能最强大的形状，可以表示任意组合的直线、弧线和曲线。d 属性包含路径命令：M（moveTo）、L（lineTo）、A（弧线）、C（三次贝塞尔曲线）、Q（二次贝塞尔曲线）和 Z（closePath）。

大写命令使用绝对坐标，小写命令使用相对坐标。M 100 50 将当前位置移到 (100,50)。L 200 150 向 (200,150) 绘制一条线。Z 会闭合路径。A rx ry rotation large-arc sweep x y 会绘制弧线。

SVG 形状支持 CSS 属性：fill、stroke、stroke-width、opacity 和 stroke-dasharray。请在 SVG 元素上使用 CSS 类，以便维护样式。SVG 的 CSS 过渡可作用于填充、描边和不透明度，从而实现平滑的状态变化。

<g> 元素可以将 SVG 元素分组。对分组应用变换、填充或描边，会影响其中的所有子元素。分组可以合成复杂形状，使它们一起移动或变换，例如包含所有组件的钟面。

在 <defs> 中定义可复用的形状、符号、渐变和裁剪路径。使用 <use href="#id"> 引用它们。这样可以避免重复复杂的路径数据，并通过引用元素实现实例级的变换和样式设置。

在 SVG 中，折线和多边形有什么区别？

SVG 提供声明式的形状元素（矩形、圆形、椭圆、线段、折线和多边形），以及用于创建复杂形状的多用途路径元素，并支持 M、L、A、C、Q、Z 命令。CSS 样式、使用分组元素进行分组，以及通过定义和引用进行复用，使可维护、可扩展的矢量图形能够直接嵌入 HTML。