下面给你整理一份SVG 布置画布、坐标系统和视窗的方法指南，涵盖基础概念、语法、坐标设置和实战示例，适合前端可视化和矢量图形设计入门。

📘 一、SVG 基本概念

  • SVG（Scalable Vector Graphics）：可缩放矢量图形，是一种基于 XML 的标记语言，用于绘制图形、图表和交互界面。
  • 特点：
    1. 矢量图：放大不会失真
    2. 基于 XML：可用 DOM 操作
    3. 支持 CSS 和 JavaScript：可实现动态效果
  • 核心元素：<svg> 作为画布容器，所有图形元素（如 <rect>, <circle>, <path>）都在 <svg> 内绘制。

📘 二、创建 SVG 画布（Canvas）

1️⃣ 基本语法

&lt;svg width="宽度" height="高度">
    &lt;!-- 绘制图形元素 -->
&lt;/svg>
  • width：画布宽度
  • height：画布高度
  • 单位可省略，默认像素

示例：

&lt;svg width="400" height="300" style="border:1px solid #000">
    &lt;rect x="50" y="50" width="100" height="80" fill="blue" />
&lt;/svg>
  • 创建一个 400×300 的画布，绘制蓝色矩形

📘 三、SVG 坐标系统

  • 默认坐标系：
    • 原点 (0,0) 在画布左上角
    • x 轴向右增大，y 轴向下增大
  • 单位：默认 px，可用 % 或自定义单位

1️⃣ 坐标属性

  • x、y：元素左上角坐标
  • cx、cy：圆形、椭圆中心坐标
  • width、height：宽高
  • r：圆半径
  • viewBox：定义用户坐标系

📘 四、设置 SVG 视窗（Viewport）与 viewBox

1️⃣ viewBox 属性

  • 定义“用户坐标系”的范围
  • 语法：
viewBox="minX minY width height"
  • 参数：
    • minX, minY：用户坐标系左上角
    • width, height：用户坐标系宽高

示例：

&lt;svg width="400" height="300" viewBox="0 0 200 150" style="border:1px solid #000">
    &lt;rect x="0" y="0" width="200" height="150" fill="lightgray"/>
    &lt;circle cx="100" cy="75" r="50" fill="blue"/>
&lt;/svg>
  • 实际画布 400×300 px
  • 用户坐标系 200×150 单位
  • 元素会根据 viewBox 自动缩放适应画布

2️⃣ 保持宽高比：preserveAspectRatio

  • 控制 viewBox 缩放方式
  • 常用值：
    • xMidYMid meet：保持比例，适应画布
    • xMinYMin slice：填充整个画布，可能裁剪
&lt;svg width="400" height="300" viewBox="0 0 200 150" preserveAspectRatio="xMidYMid meet">
    ...
&lt;/svg>

📘 五、在 SVG 中布置坐标网格

  • 可通过 <line> 或 <path> 绘制网格，方便布局参考

示例：

&lt;svg width="400" height="300" viewBox="0 0 200 150" style="border:1px solid #000">
    &lt;!-- 绘制网格 -->
    &lt;g stroke="#ccc" stroke-width="0.5">
        &lt;!-- 横线 -->
        &lt;line x1="0" y1="30" x2="200" y2="30"/>
        &lt;line x1="0" y1="60" x2="200" y2="60"/>
        &lt;line x1="0" y1="90" x2="200" y2="90"/>
        &lt;line x1="0" y1="120" x2="200" y2="120"/>
        &lt;!-- 竖线 -->
        &lt;line x1="50" y1="0" x2="50" y2="150"/>
        &lt;line x1="100" y1="0" x2="100" y2="150"/>
        &lt;line x1="150" y1="0" x2="150" y2="150"/>
    &lt;/g>
    &lt;!-- 绘制中心圆 -->
    &lt;circle cx="100" cy="75" r="30" fill="red"/>
&lt;/svg>
  • 通过 <g> 分组管理样式
  • 网格帮助理解坐标和布局

📘 六、SVG 坐标系统转换

  1. 平移（translate）
&lt;g transform="translate(50,30)">
    &lt;rect x="0" y="0" width="50" height="50" fill="green"/>
&lt;/g>
  1. 缩放（scale）
&lt;g transform="scale(2)">
    &lt;circle cx="50" cy="50" r="25" fill="blue"/>
&lt;/g>
  1. 旋转（rotate）
&lt;g transform="rotate(45,100,75)">
    &lt;rect x="50" y="50" width="50" height="50" fill="orange"/>
&lt;/g>

📘 七、SVG 画布布置最佳实践

  1. 明确画布宽高：避免元素溢出
  2. 使用 viewBox 统一坐标系：便于响应式布局
  3. 布置参考网格：便于绘制精确图形
  4. 组合 <g> 元素管理样式与坐标
  5. 配合 transform 实现平移、缩放、旋转
  6. 保持宽高比：使用 preserveAspectRatio 保证图形不变形

📘 八、综合示例

&lt;svg width="400" height="300" viewBox="0 0 200 150" preserveAspectRatio="xMidYMid meet" style="border:1px solid #000">
    &lt;!-- 坐标网格 -->
    &lt;g stroke="#ccc" stroke-width="0.5">
        &lt;line x1="0" y1="30" x2="200" y2="30"/>
        &lt;line x1="0" y1="60" x2="200" y2="60"/>
        &lt;line x1="0" y1="90" x2="200" y2="90"/>
        &lt;line x1="0" y1="120" x2="200" y2="120"/>
        &lt;line x1="50" y1="0" x2="50" y2="150"/>
        &lt;line x1="100" y1="0" x2="100" y2="150"/>
        &lt;line x1="150" y1="0" x2="150" y2="150"/>
    &lt;/g>
    &lt;!-- 绘制矩形和圆形 -->
    &lt;rect x="20" y="20" width="50" height="50" fill="green"/>
    &lt;circle cx="150" cy="100" r="30" fill="red"/>
&lt;/svg>
  • 画布 400×300 px
  • 用户坐标 200×150
  • 网格帮助定位图形
  • 矩形和圆形在坐标系内绘制

这套方法能让你灵活布置 SVG 画布、设置坐标系统、管理视窗，适合前端图表、动画和可视化开发。