svg 如何保存位置信息

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，它可以保存位置信息，以下是常见的方法：

1. 使用x和y属性：在 SVG 元素中，可以使用x和y属性来指定元素的位置。例如：

<rect x="10" y="20" width="50" height="30" fill="blue" />

这将创建一个蓝色矩形，位于（10, 20）坐标点，宽度为 50，高度为 30。

2. 使用transform属性：可以使用transform属性来指定元素的位置和变换信息。例如：

<rect x="10" y="20" width="50" height="30" fill="blue" transform="translate(20, 30)" />

这将创建一个蓝色矩形，位于（10, 20）坐标点，宽度为 50，高度为 30，并将其平移 20 个单位到右侧和 30 个单位到下侧。

3. 使用viewBox属性：可以使用viewBox属性来指定 SVG 图形的视图框，包括位置信息。例如：

<svg viewBox="0 0 100 100">
  <!-- 图形内容 -->
</svg>

这将创建一个 SVG 图形，视图框的左上角位于（0, 0），宽度和高度均为 100。

4. 使用g元素：可以使用g元素来分组 SVG 元素，并指定分组的位置信息。例如：

<g transform="translate(20, 30)">
  <!-- 图形内容 -->
</g>

这将创建一个分组，包括所有子元素，并将其平移 20 个单位到右侧和 30 个单位到下侧。

5. 使用 SVG 坐标系统：SVG 提供了一个坐标系统，可以使用svg元素的width和height属性来指定坐标系统的尺寸。例如：

<svg width="100" height="100">
  <!-- 图形内容 -->
</svg>

这将创建一个 SVG 图形，坐标系统的尺寸为 100x100。

这些方法可以单独使用，也可以组合使用以达到不同的效果。