菜鸟-创作你的创作

编写SVG布置画布和坐标系统以及视窗的方法

lichongyang

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

📘 一、SVG 基本概念

📘 二、创建 SVG 画布（Canvas）

1️⃣ 基本语法

<svg width="宽度" height="高度">
    <!-- 绘制图形元素 -->
</svg>

示例：

<svg width="400" height="300" style="border:1px solid #000">
    <rect x="50" y="50" width="100" height="80" fill="blue" />
</svg>

📘 三、SVG 坐标系统

1️⃣ 坐标属性

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

1️⃣ viewBox 属性

viewBox="minX minY width height"

示例：

<svg width="400" height="300" viewBox="0 0 200 150" style="border:1px solid #000">
    <rect x="0" y="0" width="200" height="150" fill="lightgray"/>
    <circle cx="100" cy="75" r="50" fill="blue"/>
</svg>

2️⃣ 保持宽高比：preserveAspectRatio

<svg width="400" height="300" viewBox="0 0 200 150" preserveAspectRatio="xMidYMid meet">
    ...
</svg>

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

示例：

<svg width="400" height="300" viewBox="0 0 200 150" style="border:1px solid #000">
    <!-- 绘制网格 -->
    <g stroke="#ccc" stroke-width="0.5">
        <!-- 横线 -->
        <line x1="0" y1="30" x2="200" y2="30"/>
        <line x1="0" y1="60" x2="200" y2="60"/>
        <line x1="0" y1="90" x2="200" y2="90"/>
        <line x1="0" y1="120" x2="200" y2="120"/>
        <!-- 竖线 -->
        <line x1="50" y1="0" x2="50" y2="150"/>
        <line x1="100" y1="0" x2="100" y2="150"/>
        <line x1="150" y1="0" x2="150" y2="150"/>
    </g>
    <!-- 绘制中心圆 -->
    <circle cx="100" cy="75" r="30" fill="red"/>
</svg>

📘 六、SVG 坐标系统转换

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

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

退出移动版