做这个SVG打地鼠小项目最初的想法特别天真不就是画一只地鼠然后让它从地洞里钻出来挨打嘛。结果我蹲在电脑前敲了一下午代码画出来的东西怎么看都像一只眼神呆滞的骏马地鼠本鼠反而成了马屁股后面的背景板。我把这个半成品发到群里吐槽朋友回了一句你这是SVG打打打打打打地鼠马括号里那个马字就这么成了我接下来一周跟SVG死磕的起点。如果你也遇到过类似的情况——明明照着教程写了svg标签用circle、rect拼好了图形渲染出来却完全不是那么回事或者在网上看到一套漂亮的SVG素材却不知道怎么下载、怎么改、怎么在自己的项目里复用——那这篇文章就是给你准备的。全文从一个画废的地鼠开始把SVG的坐标系、路径命令、工具链、工程化落地和动效玩法整体过一遍最后我们把它做成一个真的能玩的打地鼠小游戏。1. 先搞清楚SVG是怎么把图形画出来的一个地鼠引发的坐标系思考1.1 从网页里的矢量图说起SVG到底是个啥SVG的全称是Scalable Vector Graphics翻译过来就是可缩放矢量图形。它和我们常见的PNG、JPG最本质的区别在于位图记录的是每个像素点的颜色信息而SVG记录的是图形对象的数学描述——这个圆圆心在哪、半径多大、那条曲线的控制点在哪。所以SVG可以无限放大不模糊它也天然是文本文件可以被人直接阅读和修改。实际开发里SVG最大的三个优势是体积小、可编程、可交互。图标类素材尤其适合SVG一套几十个图标打包成雪碧图可能才几十KB而PNG图标每个都要至少几KB还得考虑2x、3x的适配。更有意思的是SVG的每一个元素都是一个DOM节点这意味着你可以用CSS和JavaScript直接操作它——改颜色、加动画、绑事件完全不需要重新生成图片。这也是为什么前端工程师越来越依赖SVG而不是直接用图标字体或者位图。1.2 viewBox、width和height三个属性管好画布先看一个最标准的SVG头部svg width800 height600 viewBox0 0 800 600 xmlnshttp://www.w3.org/2000/svg这行代码里的width和height决定了SVG在页面上的显示尺寸单位默认是px。viewBox则是内部坐标系的定义它接受四个值min-x min-y width height。viewBox0 0 800 600意思是我内部这个虚拟画布左上角是(0, 0)宽800个单位高600个单位。浏览器再把这个虚拟画布等比缩放到width和height对应的实际显示尺寸上。这里面最容易踩的坑就是viewBox和width/height不一致。比如你画了一个viewBox从0到100的图形但width和height设了800×600浏览器会根据两个坐标系的比例自动缩放图形可能被拉伸变形。我的建议是开发初期统一使用一套坐标系设计稿是多少尺寸viewBox就写多少尺寸width和height随后调整。比如我画地鼠的时候用的是viewBox0 0 400 400实际显示时通过CSS把宽度设成200px高度auto这样地鼠就整体缩小了但内部所有坐标不用改一个数。另外xmlnshttp://www.w3.org/2000/svg是SVG的命名空间声明。如果你直接在浏览器里看一段独立的SVG代码它是纯文本不是图形多半就是漏了这个命名空间。单独以.svg文件存在的场景可以不加但内嵌在HTML里时最好写上避免某些解析器不认。1.3 基本几何元素拼图circle、ellipse、rect、polygonSVG提供了一批内置的基础形状元素日常画图基本靠它们就能完成八成需求。常用的有这几个circle圆需要cx、cy、r三个属性。ellipse椭圆需要cx、cy、rx、ry。rect矩形需要x、y、width、height还可以用rx、ry做圆角。line线段需要x1、y1、x2、y2。polygon多边形用points传坐标序列。path路径最灵活后面单独讲。我画第一版地鼠时就用了一个大椭圆当身体、两个小椭圆当耳朵、一个圆当眼睛、几个多边形当牙齿。代码大概长这样svg width400 height400 viewBox0 0 400 400 xmlnshttp://www.w3.org/2000/svg ellipse cx200 cy250 rx120 ry90 fill#c8a06e / ellipse cx150 cy180 rx30 ry35 fill#c8a06e / ellipse cx250 cy180 rx30 ry35 fill#c8a06e / circle cx180 cy240 r8 fill#333 / polygon points180,260 220,260 200,290 fill#fff / /svg让人哭笑不得的是因为SVG的坐标系原点在左上角y轴方向是向下的和我习惯的数学坐标系完全相反结果我把耳朵和身体的y坐标写颠倒了。渲染出来之后两个耳朵出现在身体下方远远看去像四条腿整体就成了一匹趴着的马。所以说画SVG之前一定先把坐标系在脑子里过一遍x向右y向下永远别想当然。2. path命令与贝塞尔曲线地鼠和马的真正分水岭2.1 直线命令M、L、H、V、Z怎么用如果你只想拼圆形、矩形基础形状完全够用。但真要画地鼠这种不太规整的动物path才是主力。path通过d属性描述路径本质上是一连串绘图指令。常用的直线类指令M x ymoveto把画笔移动到某个点不画线。L x ylineto从当前点画一条直线到指定点。H xhorizontal lineto水平画线只需要x坐标。V yvertical lineto垂直画线只需要y坐标。Z/zclosepath闭合路径从当前点画直线回起点。举个小例子画一个边长100的等边三角形可以让起点在顶点(200, 50)然后L 273 137画右侧边再L 127 137画底部边最后Z闭合。指令可以写在同一行也可以分行大小写都行但小写字母表示相对坐标大写是绝对坐标这一点很容易搞混我建议初学阶段统一用大写逻辑更清楚。2.2 曲线命令C、S、Q、T贝塞尔曲线的直觉理解真正的复杂图形棱角分明的多边形只是少数更多是圆润的曲线。这里就要用到贝塞尔曲线命令其中最常见的就是C和S。C x1 y1, x2 y2, x y是三次贝塞尔曲线从当前点出发经过两个控制点到达终点(x, y)。理解贝塞尔有个很生活化的方法你想象一条绳子两端固定然后拉起两个点去拽绳子绳子最后弯曲的形状就由这两个拉点的位置决定。第一个控制点影响起始方向的切线第二个控制点影响结束方向的切线。S x2 y2, x y是平滑贝塞尔曲线如果你前面已经用C画了一段曲线S命令会自动把上一段曲线的第二个控制点对称过来作为新曲线的第一个控制点这样新老曲线连接处就是光滑的。它的价值在于画波浪线、画身体轮廓时可以减少大量手动计算。二次贝塞尔对应Q x1 y1, x y只有一个控制点T是它的平滑版本。实际画地鼠脸我用了一段C加一段S来勾勒脸的弧度path dM 100 220 C 100 300, 150 350, 200 350 S 300 300, 300 220 fill#c8a06e /这段代码从左侧脸颊开始用C画到下巴再用S平滑回到右侧脸颊一条连续光滑的地鼠大脸就出来了。从这里也能看出SVG path c之所以是高频搜索词是因为C命令几乎包办了所有曲线图形的绘制掌握了它才算真正入门SVG。2.3 拿鹈鹕骑车练手把复杂插画拆成可理解的形状网上有个热门需求叫generate an svg of a pelican riding a bicycle很多人想让AI生成一段鹈鹕骑自行车的SVG代码。先不管AI画得好不好这个例子非常适合练习拆解复杂图形。鹈鹕骑车看似很难但冷静分析其实就是自行车两个圆当车轮几条line当车架一个小矩形当车座。鹈鹕身体一个大椭圆。鹈鹕脖子和头一条长长的曲线用C命令。鹈鹕大嘴一个带弧度的多边形或path。腿几段短粗的line或path。完整实现一下大约就是下面这段svg viewBox0 0 400 300 xmlnshttp://www.w3.org/2000/svg circle cx100 cy240 r45 fillnone stroke#333 stroke-width6/ circle cx280 cy240 r45 fillnone stroke#333 stroke-width6/ line x1100 y1240 x2185 y2195 stroke#333 stroke-width6/ line x1280 y1240 x2200 y2195 stroke#333 stroke-width6/ line x1185 y1195 x2200 y2195 stroke#333 stroke-width6/ rect x180 y175 width30 height12 rx4 fill#333/ ellipse cx200 cy130 rx50 ry35 fill#fff stroke#333 stroke-width4/ path dM 235 120 C 260 90, 280 70, 300 60 C 300 50, 290 45, 275 60 C 255 75, 240 95, 230 115 Z fill#f4a261/ path dM 300 55 L 360 65 L 355 75 L 295 68 Z fill#e76f51/ path dM 185 150 L 175 190 M 215 150 L 225 190 stroke#333 stroke-width6/ /svg这段代码当然算不上艺术品但结构非常清晰每个复杂的动物、物件本质上都是一堆基础图形的组合。你在网上看到的精美SVG插画拆开看也无非是这样一层层叠加出来的。所以千万别怕复杂图形先拆再画错了就调整坐标没有捷径。2.4 路径方向、闭合与填充规则为什么图形会漏气还有一个容易让图形变得诡异的细节是填充规则。SVG默认的填充规则是nonzero非零环绕还有一种叫evenodd奇偶。两条规则在遇到路径自交或重叠时结果完全不同。简单说nonzero会判断某个点被路径环绕的次数次数非零就填充evenodd则看一个点被路径包围的次数是奇数还是偶数奇偶决定填不填。举个最日常的例子你想画一个中间带洞的甜甜圈如果用一条逆时针外圈和一条顺时针内圈组成的pathnonzero能正确镂空但如果两条路径方向画反了nonzero就会把中间的洞也填上。用evenodd则不用管方向只要有重叠就按奇偶生成镂空。我画地鼠耳朵的时候耳朵和脑袋重叠的部分因为路径方向问题渲染出来多了一块奇怪的镂空看起来就像马鬃。排查了一阵最终把耳朵路径的绘制方向反过来或者直接加上fill-ruleevenodd问题就解决了。遇到图形漏气、出现莫名其妙的透明洞先检查这个。3. 别自己硬画SVG素材获取、可视化编辑与批量下载的实用路线3.1 免费SVG素材网站先从现成资源下手很多时候我们想要的地鼠、自行车、花朵之类的图标其实完全没必要手写。业内常用的免费素材站有这么几个SVG Repo聚合型素材站搜出来的SVG可以直接查看代码和下载。Iconify更偏图标库聚合支持按框架检索还能在线生成SVG。Heroicons、Tabler Icons质量很高的开源图标集适合直接拿来做UI。unDraw偏插画风适合博客配图。使用这些素材时最需要注意的是许可证。有的站允许免费商用有的要求保留署名有的是纯个人使用授权。我自己的习惯是下载前先翻一下页面底部的License说明把来源和许可类型记录在项目的README里省得以后上线被版权问题背刺。这点在商业项目里尤其重要。3.2 Drawio等工具里编辑SVG可视化改稿和文本编辑怎么取舍Drawio是一个很好用的免费流程图工具也支持SVG的导入和导出。很多人不知道的是你可以把一段SVG代码直接粘贴到Drawio里进行可视化调整改完之后再导出成SVG。这个流程在处理简单几何图形时非常香尤其是画流程图、架构图里的节点图标。但Drawio导出的SVG有一个明显的问题它会附带很多命名空间和元数据文件体积会膨胀不少而且可能带上diagram这类非标准节点。如果你要用在网页项目里建议导出之后再手动清理一下或者用后面要讲的SVGO统一压缩。如果你需要专业级的矢量编辑能力更推荐Inkscape或Figma它们对SVG的标准兼容性更好导出的代码也更干净。说到Figma还有一个前端常用的小技巧在Figma里画好图形后复制图形直接粘贴到代码编辑器里Figma会自动生成可用的SVG代码。这个流程省去了导出文件再打开再复制的中间步骤效率能高很多。3.3 SVG-Crowbar如何把网页上的SVG扒下来有时候在网页上看中了一张SVG插画或图表右键另存为却只给了PNG或者什么都没有。很多人会用浏览器DevTools去找SVG节点但逐个复制多个SVG很麻烦。SVG-Crowbar就是一个解决这个问题的书签工具。它的原理并不复杂在你的浏览器里运行一段JavaScript脚本脚本会遍历document.querySelectorAll(svg)把每个SVG节点用XMLSerializer序列化成字符串再通过Blob生成一个可下载的SVG文件。使用它通常只需要两步把SVG-Crowbar的代码存成浏览器书签然后打开目标页面点击书签页面右下角会出现一个面板列出所有SVG点击即可下载。实际体验下来它适合拿来做个人练习和参考但要注意网页里有些SVG依赖外部CSS或图片资源直接下载后可能样式错乱这是正常现象因为SVG被孤立出来了。3.4 SVG爬虫下载批量素材先看协议再谈技术当你在一个素材网站上需要批量下载几百个SVG时手动一个个点就不现实了。写一个简单的Python爬虫是常见的做法。大体思路是请求列表页 - 解析出详情页链接 - 请求详情页 - 提取SVG源代码或文件地址 - 保存为.svg文件。我写过最简版大概长这样import requests from bs4 import BeautifulSoup url https://example.com/svgs html requests.get(url).text soup BeautifulSoup(html, html.parser) svg_tags soup.find_all(svg) for i, svg in enumerate(svg_tags): with open(fsvg_{i}.svg, w, encodingutf-8) as f: f.write(str(svg))但这里必须多说一句技术上能做不代表你应该做。爬取任何网站之前先看对方的robots.txt和用户协议很多素材站明确禁止用脚本批量下载涉及版权素材时下载后商用更是有风险。我个人的底线是只爬取明确允许免费商用、无需署名的素材并且控制请求频率不给对方服务器添麻烦。工具无罪用法要有分寸。4. 把SVG塞进真实项目封装、优化、加载与解析的硬核清单4.1 本地SVG图标封装从分散svg到Symbol雪碧图在正式的前端项目里图标的组织方式非常影响性能和开发体验。十年前流行字体图标现在更主流的是SVG Symbol雪碧图方案。思路是把所有图标的symbol集中到一个SVG文件里每个symbol有唯一的id使用时只需要用use href#icon-name/use引用。最早的笨办法是把SVG文件复制粘贴到每个页面里或者做成一个个img请求这都会带来额外的网络请求或代码冗余。打包工具自动化之后目录结构大概是这样的把每个图标存成一个独立的.svg文件放在src/assets/icons里然后通过svg-sprite-loader或者vite-plugin-svg-icons之类的插件在构建时自动合并成一个雪碧图。组件里写一个Icon组件接收name属性内部渲染成svguse :href#icon-${name}/use/svg。这样做的收益很明显项目里一百个图标网络请求只有一次而且每个图标都可以通过CSS控制颜色和大小。需要注意的坑是use引用外部SVG文件时在某些浏览器下受跨域限制所以雪碧图最好和页面同源或者通过构建工具直接注入HTML。4.2 清理SVG冗余失效代码体积从60KB到6KB的优化过程从设计软件导出的SVG往往携带大量垃圾信息无用的metadata、编辑器私有命名空间、多余的tspan、过长的浮点小数、空的g分组。我之前接手过一个项目一张SVG地图导出来60KB用浏览器打开倒是没毛病但放在页面里明显拖慢了首屏。后来我养成了固定的优化流程先用文本编辑器打开SVG把能看到的metadata、注释等整体删除。用SVGO命令行工具做深度清理它会把能合并的路径合并、能去掉的属性去掉、小数精度压缩。在构建环节集成svgo-loader或vite-svg-loader让每次导入SVG时自动完成优化。一份简单的SVGO配置可以长这样{ plugins: [ { name: preset-default }, { name: removeDimensions, params: { removeWidth: true, removeHeight: true } }, { name: cleanupIds } ] }实测下来那张60KB的地图经过SVGO处理变成了6KB不到。这里有个很关键但容易忽略的点优化前一定先确认SVG里有没有动态交互逻辑或依赖id选择器的CSS因为cleanupIds这类插件会重写id可能把动画和样式搞坏。生产环境里我是建议在源文件层面做优化而不是在运行时用JS去重写。4.3 好用的SVG加载与转换场景Cesium加载SVG、LeaferJS导出SVGSVG的应用范围早就不局限于网页标签里。在Cesium这类三维地球可视化项目中SVG可以作为动态纹理或图标资源使用。最常见的做法是把SVG转成DataURL然后设置到Billboard的image属性上const svgString svg xmlnshttp://www.w3.org/2000/svg width32 height32 circle cx16 cy16 r12 fill#ff0000/ /svg; const marker new Cesium.BillboardGraphics({ image: data:image/svgxml;base64, btoa(svgString), ... });这种方式的好处是不需要额外请求图片代码里就能动态生成任意样式的地图标记。需要注意的是WebGL纹理对SVG的解析能力取决于浏览器和Cesium内部实现不要使用过于复杂的SVG特性否则可能出现渲染异常。LeaferJS是另一类场景的代表。它是一个专注于2D渲染的引擎具有高性能的Canvas渲染能力并且兼容SVG的解析和导出。如果你需要在一个Canvas大画布上绘制几十万个图形直接操作SVG DOM会卡成幻灯片但用LeaferJS把SVG转换成Canvas元素就流畅得多。它导出的SVG也可以被其它工具继续编辑。选型的时候我的建议是逻辑简单、追求可维护性的场景用原生SVG高并发绘制、强性能要求的场景考虑Canvas引擎配合SVG做中间交换格式。4.4 SVG解析进阶Vue中解析OFD文件时为什么绕不开SVG说到OFD国内做电子发票、电子公文相关系统的人应该不陌生。OFD是国家标准的开放版式文档格式很多场景需要在前端直接解析并预览。常见做法是引入ofd.js这类解析库把OFD解析之后渲染到前端页面而其中的矢量内容最终大多会落到SVG或Canvas上。在Vue项目里封装一个OFD预览组件典型的流程是用户上传/传入OFD文件地址 - 调用解析库把文件解析成页面描述 - 得到每一页的渲染数据 - 用Canvas绘制位图或者用SVG绘制矢量内容做高清打印。如果你的场景对清晰度要求高比如电子发票要打印报销用SVG输出是更好的选择——矢量输出放大多少倍都不会糊而且SVG节点可以直接被浏览器打印引擎识别。这里有几个实际开发中很容易踩的坑解析是异步的文件稍大一点主线程会卡顿最好配合Web Worker至少也要给加载状态。解析后生成的SVG节点往往数量庞大渲染完成前设置一个container的高度占位避免页面跳动。不同解析库支持的CSS样式程度不同预览效果和原生阅读器不完全一致最好在UI上放一个渲染精度说明。4.5 前端SVG标题扫光效果给页面标题加一道流动的高光讲完了工程化说个让页面眼前一亮的小技巧标题扫光效果。原理很简单用SVG的linearGradient给文字上渐变再用CSS动画让渐变的位置不断移动看起来就像一束光在标题上扫过。先定义一个SVG渐变并应用到文字上svg width320 height60 defs linearGradient idshine gradientUnitsuserSpaceOnUse x10 y10 x2100% y20 stop offset0% stop-color#333/ stop offset50% stop-color#fff/ stop offset100% stop-color#333/ /linearGradient /defs text x10 y40 font-size32 fillurl(#shine)SVG打地鼠/text /svg然后通过CSS或者JS去改变渐变的位置。这里最容易踩的坑是gradientUnits。默认值是objectBoundingBox百分比坐标相对的是文字所在盒子的范围如果改成userSpaceOnUsex1、x2的百分比就相对整个用户坐标系。做扫光效果推荐用userSpaceOnUse加百分比动画更可控。不过要注意SVG中的text在浏览器中和普通DOM的排版有差异复杂布局时文字可能不换行、不继承外部字体所以这个方案更适合做固定的装饰性标题。如果想做SEO友好的真实文字扫光可以考虑背景图裁剪到文字的background-clip: text方案但兼容性上SVG方案更稳。5. 收工实战让地鼠马变成一只真正能被打的地鼠5.1 基于前面所学重建地鼠用path重画一个像样的地鼠绕了这么大一圈终于要面对最初的问题了怎么把那只马改回地鼠。我重新梳理了地鼠的基本特征圆润的身体、半圆的耳朵、圆眼睛、大板牙、短小的前爪。这次我不再用零散的ellipse随便摆而是用一段连续path先勾勒轮廓再用其它元素做细节。把我最终用的地鼠SVG精简成核心部分svg idgopher viewBox0 0 200 200 xmlnshttp://www.w3.org/2000/svg path dM 60 100 C 60 60, 140 60, 140 100 C 140 140, 110 170, 100 175 C 90 170, 60 140, 60 100 Z fill#c8a06e/ ellipse cx72 cy82 rx14 ry16 fill#c8a06e/ ellipse cx128 cy82 rx14 ry16 fill#c8a06e/ ellipse cx72 cy82 rx10 ry12 fill#e0bf9a/ ellipse cx128 cy82 rx10 ry12 fill#e0bf9a/ circle cx82 cy112 r5 fill#222/ circle cx118 cy112 r5 fill#222/ path dM 88 130 L 112 130 L 100 146 Z fill#fff/ path dM 96 130 L 100 138 L 104 130 Z fill#333/ /svg这次我特别注意了三点一是所有曲线都用C命令并且控制点对称分布保证轮廓不过于夸张二是耳朵的填充和内耳用两个同心椭圆叠出来的方向没有问题三是牙的位置和嘴巴的三角区域匹配。渲染出来之后虽然不能说是迪士尼级别但至少一眼能看出是地鼠而不是马了。那个马的误会到此才算正式解除。5.2 用CSS动画让地鼠从洞里冒出来打地鼠的核心动作是冒出和隐藏。最简单可靠的方案是给地鼠外面包一层容器把容器的高度设为地鼠的一部分然后给地鼠加transform: translateY()动画。结构大概是这样div classhole svg classgopher.../svg /div配合的CSS.hole { width: 120px; height: 100px; overflow: hidden; border-bottom: 10px solid #7a4a2b; } .gopher { transform: translateY(60px); transition: transform 0.3s ease-in-out; } .hole.active .gopher { transform: translateY(0); }关键点在于外层容器的overflow: hidden它模拟地面地鼠只能从洞口范围露出来。这里优化时要注意transform动画可以走GPU加速比动画top值性能好得多。在地鼠需要随机出现的场景里只需要用JS给不同的.hole动态添加和移除active类就能实现东边冒一只西边冒一只的效果。5.3 打地鼠交互与计分pointer事件、坐标判断、命中率交互逻辑不复杂我用了SVG内的点击事件配合命中范围判断。因为地鼠本身不是特别规则的图形如果只点击精确的path内部玩家会觉得很不好打中。我在地鼠外围包了一层透明的点击热区用一个较大的rect或circle来接收点击。function handleClick(e) { const target e.target.closest(.gopher); if (!target) return; const hole target.closest(.hole); if (hole hole.classList.contains(active)) { score 1; updateScore(); hole.classList.remove(active); } } document.querySelector(.game).addEventListener(click, handleClick);事件委托在这里非常有用整个游戏区域只需要一次事件监听不需要给每只地鼠单独绑定。关于命中率还有一个经验热区比视觉上的地鼠大20%左右玩家的体感最好。如果热区完全贴合图形总觉得打中了却没反应热区太大又少了点挑战性。20%是个不错的平衡值。游戏还需要倒计时、随机出洞和音效。倒计时用setInterval即可随机出洞我用的策略是把所有洞口编号每个300-800毫秒随机激活一个停留时间700-1200毫秒音效方面原生的AudioContext或者简单的HTMLAudio都行不建议用复杂的音频库为了一个小游戏引入重型依赖不值得。5.4 兼容性与性能实测做完之后我顺手在几台设备和浏览器上跑了一轮测试记录大概如下环境帧率表现点击响应备注Chrome 桌面版稳定60fps即时表现最优Edge 桌面版稳定60fps即时与Chrome接近Safari Mac版55-60fps基本即时部分CSS动画有延迟感iOS Safari45-50fps略有延迟建议减少同时冒出的地鼠数量低端Android浏览器30-40fps明显延迟避免使用过多filter效果实测下来SVG做轻量级互动游戏完全够用但有几个性能提醒不要在地鼠上用filter: drop-shadow这类滤镜会显著拉低帧率尤其是移动端。同时出现在页面上的活动元素数量控制在20个以内超过之后DOM的布局开销会明显上升。CSS动画优先使用transform和opacity不要用top/left做位移动画。移动端点击响应至少有300ms的延迟隐患记得在页面加上touch-action: manipulation或处理点击事件。做成一个小游戏我对SVG的边界也有了更真切的感受它适合做清晰、可维护、可交互的矢量界面和轻量应用但真要追求复杂游戏或海量粒子还是得换Canvas。工具不分高低选对场景才是关键。最后再分享一个个人经验SVG排错时别在浏览器里盲试。我习惯把SVG代码粘到一个独立的HTML文件里然后用DevTools逐个元素点亮排查。哪块不对劲先在代码里删掉或注释掉怀疑对象确认是不是它的问题再逐步恢复。这种二分法排错虽然土但对付SVG这种层层嵌套的结构特别有效。地鼠变马的问题也是这样一步步削出来的答案。