SVG零基础入门+手绘地图热点交互实战笔记（附完整代码）

本文整合SVG零基础入门核心知识点、path路径指令详解，以及手绘地图+SVG热点交互的实战方案，从基础图形绘制到实际项目应用，全程大白话讲解，零基础也能10分钟上手，新手收藏直接照搬即可。
一、超简单SVG入门教程（零基础10分钟上手）

准备工作（无需复杂工具）
新建文本文档（记事本即可）；
写入SVG代码后，将文件后缀 .txt 改为 .svg；
双击用浏览器（Chrome/Edge/Firefox均可）打开，即可查看效果。
SVG固定开头（所有SVG文件必写）
任何SVG图形都需要以下固定结构，直接复制套用即可：
```
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">

</svg>
``````
```
关键参数说明：

width：SVG画布宽度；
height：SVG画布高度；
xmlns：SVG命名空间，固定照抄即可，确保浏览器正常解析。

5个最常用基础图形（直接复制改参数）
基础图形无需手写复杂代码，复制以下示例，修改坐标、颜色等参数即可快速生成。
（1）圆形 circle
```
<circle cx="150" cy="100" r="50" fill="red"/>
```
参数说明：

cx、cy：圆形中心点的x、y坐标；
r：圆形半径；
fill：圆形填充颜色（支持英文、十六进制、rgb）。
（2）矩形 rect
```
<rect x="20" y="20" width="100" height="80" fill="blue" rx="10"/>
```
参数说明：
x、y：矩形左上角的x、y坐标；
width、height：矩形的宽和高；
rx：矩形圆角大小（可选，不写则为直角）。
（3）线条 line
```
<line x1="10" y1="10" x2="200" y2="150" stroke="black" stroke-width="2"/>
```
参数说明：
x1、y1：线条起点坐标；
x2、y2：线条终点坐标；
stroke：线条颜色；
stroke-width：线条粗细。
（4）文字 text
Hello SVG
参数说明：
x、y：文字的基准坐标；
font-size：文字大小；
fill：文字颜色。
（5）三角形（路径 path）
基础图形无法实现的简单多边形，用path路径即可，以下是三角形示例：
```
<path d="M150 50 L50 150 L250 150 Z" fill="green"/>
```
二、SVG万能不规则图形：path路径（核心重点）
SVG最强功能就是用path路径绘制任意不规则图形（爱心、星星、云朵、景点轮廓等），核心逻辑：用线条一笔画出任何形状，所有不规则图形都靠它实现。

常用path示例（直接复制可用）
（1）爱心（用C指令绘制圆滑曲线）
```
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M100,30 C150,0 180,80 100,160 C20,80 50,0 100,30" fill="red"/>
</svg>
```
（2）不规则多边形（用M、L、Z指令绘制）
```
<path d="M50 50 L150 30 L180 120 L90 180 L20 100 Z" fill="#9900ff"/>
```
（3）云朵（用Q指令绘制平滑曲线）
```
<path d="M60,100 Q100,40 140,100 Q180,160 100,180 Q20,160 60,100" fill="white" stroke="black"/>
```
三、SVG path指令超通俗讲解（M / L / Q / C / Z 全讲清）
path标签中，d=”…” 里面的内容就是画图指令，字母是命令，后面跟坐标，核心规则：x轴向右变大，y轴向下变大（和数学坐标系不同，注意区分）。
基础指令（必记）
（1）M = MoveTo 移动到（提笔，不画线）

格式：M x y；
作用：把画笔移动到指定坐标点，不画线，作为画图的起点；
示例：M 50 50 → 画笔移动到（50,50）位置，准备画图。
（2）L = LineTo 画直线（落笔，直线到）
格式：L x y；
作用：从上个点（或起点）直线连接到当前指定坐标点；
示例：M50 50 L150 80 → 从（50,50）画直线到（150,80）。
（3）Z = ClosePath 闭合路径
格式：直接写 Z（无需加坐标）；
作用：从最后一个点直线连接回起点，封闭图形（绘制多边形、不规则图形必加）；
示例：三角形路径 M50 50 L150 30 L180 120 Z → 闭合后形成完整三角形。

曲线指令（画圆滑不规则图形必用）
（1）Q = Quadratic Bézier 二次贝塞尔曲线（1个控制点）

格式：Q 控制点x 控制点y 终点x 终点y；
通俗理解：起点是上一个点，控制点决定曲线的弯曲方向，终点是曲线的结束点；
示例：M20 100 Q100 20 180 100 → 从（20,100）出发，被（100,20）往上拉，弯到（180,100），形成一条圆滑弧线。
（2）C = Cubic Bézier 三次贝塞尔曲线（2个控制点）
格式：C 控1x 控1y 控2x 控2y 终点x 终点y；
特点：两个控制点，曲线弯曲更自由，适合绘制爱心、云朵、波浪等复杂圆滑图形；
示例：前面的爱心图形，就是用C指令绘制的，通过两个控制点控制爱心的弧度。

大小写区别（超级重要，避免踩坑）

大写（M、L、Q、C）：绝对坐标，相对于SVG画布左上角计算；
小写（m、l、q、c）：相对坐标，相对于上一个点的位置计算（往右、往下的偏移量）；
示例：M50 50 l30 20 → 起点（50,50），向右偏移30、向下偏移20，等同于 M50 50 L80 70。

记忆口诀（新手必背）
M：挪过去（起点）；L：拉直线；Q：弯一下（1个把手）；C：自由弯（2个把手）；Z：连回来封口。
四、实战：手绘地图+SVG热点交互完整方案
实际项目中，手绘地图的山水、建筑、纹理等细节，SVG无法手写还原，此时最优方案是「PNG底图+SVG透明热点层」，既保留视觉质感，又能实现不规则区域点击交互，还能解决缩放错位问题。
核心结论（实战关键）
手绘地图的纹理、色彩：用PNG/JPG底图展示，SVG无法手写还原；
不规则区域点击：用SVG做透明「热点点击层」，悬浮在底图上方，用path圈出每个区域；
缩放不错位：严格用SVG的viewBox属性绑定底图尺寸，确保底图和SVG同步缩放。
完整可运行HTML代码（直接复制可用）
替换代码中你的地图图片地址为自己的手绘地图链接，即可实现3个不规则景点的点击交互（点击弹出提示，可直接改成页面跳转）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>手绘地图 - SVG热点交互</title>
  <style>
    /* 外层容器：相对定位，控制整体大小 */
    .map-box {
      position: relative;
      width: 90%;
      max-width: 960px;
      margin: 0 auto;
    }
    /* 底图：100%自适应 */
    .map-bg {
      width: 100%;
      display: block;
    }
    /* SVG热点层：绝对定位，铺满底图 */
    .map-hotspot {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<div class="map-box">
  <!-- 1. 底层：手绘地图底图 -->
  <img class="map-bg" src="d.png" alt="手绘地图">
  <!-- 2. 上层：SVG透明热点层（viewBox 和原图 960×975 严格对应） -->
  <svg 
    class="map-hotspot"
    viewBox="0 0 960 975" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- 开启点击交互 -->
    <g pointer-events="all">
      <!-- 热点1：左侧红色雕塑区域（不规则path） -->
      <path 
        d="M180 310 L220 290 L280 300 L290 420 L210 430 Z" 
        fill="rgba(255,0,0,0)" 
        stroke="rgba(255,0,0,0.3)"
        stroke-width="2"
        onclick="alert('你点击了【红色雕塑景点】')"
        style="cursor:pointer;"
      />
      <!-- 热点2：中间山水古建区域 -->
      <path 
        d="M440 280 L540 260 L640 300 L630 420 L460 440 Z" 
        fill="rgba(0,255,0,0)" 
        stroke="rgba(0,255,0,0.3)"
        stroke-width="2"
        onclick="alert('你点击了【山水古建景点】')"
        style="cursor:pointer;"
      />
      <!-- 热点3：下方彩色建筑区域 -->
      <path 
        d="M450 540 L620 530 L660 610 L630 650 L440 630 Z" 
        fill="rgba(0,0,255,0)" 
        stroke="rgba(0,0,255,0.3)"
        stroke-width="2"
        onclick="alert('你点击了【特色建筑景点】')"
        style="cursor:pointer;"
      />
    </g>
  </svg>
</div>
</body>
</html>

实战关键知识点（避坑重点）
（1）<g pointer-events="all">的作用
核心作用：让SVG中的透明区域也能被点击。
默认情况下，浏览器会认为「透明元素=不可点击」，而我们的SVG热点是完全透明的（fill=”rgba(xxx,0)”），不加这个属性，点击会没反应。将它写在（分组标签）上，可对组内所有path统一生效，不用逐个设置。
（2）fill和stroke的用法（新手必看）

fill=”rgba(xxx,0)”：填充色完全透明，不遮挡底图（正式上线可改为 fill=”none”）；
stroke=”rgba(xxx,0.3)”：调试用的浅边框，方便查看热点区域位置，上线前删除（正式上线改为 stroke=”none”）；
重点：不加这两个属性也不会变黑，默认就是透明，无需担心。
（3）缩放不错位的关键
SVG的 viewBox=”0 0 960 975” 必须和手绘地图原图的像素尺寸（宽×高）完全一致，外层容器、底图、SVG均用 width:100% 自适应，缩放时三者同步按比例变化，热点和底图景点永远对齐。
（4）path坐标获取方法（不用手敲）

将手绘地图导入工具（Figma、Inkscape、Photoshop均可，新手推荐Figma，免费易用）；
用「钢笔工具」沿着景点/区域的不规则边缘描边，生成路径；
导出路径的SVG代码，复制里面的 d 属性值，替换到上述代码中即可。
常见问题排查

点击没反应：检查是否加了 <g pointer-events="all">；
缩放错位：检查viewBox尺寸是否和地图原图一致；
热点位置不准：重新用工具描边path，确保和底图边缘贴合；
想实现跳转：将onclick 中的 alert 替换为 location.href=’目标页面地址’。
五、总结
本文从SVG零基础入门（基础图形、path指令），到实战应用（手绘地图热点交互），覆盖了新手必备的所有核心知识点，代码可直接复用，指令讲解通俗易懂，无需复杂专业知识。
重点记住：简单图形用基础标签，不规则图形用path路径；手绘地图交互用「PNG底图+SVG热点层」，严格绑定viewBox，缩放永远不错位。收藏本文，下次做SVG相关开发，直接照搬即可！