处理SVG path d路径数据

马黑黑

处理SVG path d路径数据

M0 0 C-100 100,100 100,0 0

填充 描边 生成SVG图像 获取SVG代码

马黑黑

有时候拿到一个 path 路径数据却不知道如何将其绘制到SVG画布上。主要原因是，我们很难从路径中分析它基于什么尺寸进行设计。

本 Demo，在 0*0 的临时SVG画布上先测试路径的占位，使用 getBbox 获得路径在画布上的宽高占位，获取一个合理的 viewBox 属性待用；接着将路径置入一个 symbol 标签，将获得的 viewBox 属性赋予它；最后，以 use 标签实例化symbol，画出路径图像。

点击获取SVG代码按钮，在最后一个文本框可以生成完整的SVG源码，得到源码后可根据需要修改 use 标签的位置、尺寸、着色以及描边等数据。

马黑黑

一楼源码共参考：

1. <style>
   
2.         .mainBox { margin: 0 auto; padding: 0 20px 20px 20px; height: 95vh; display: flex; flex-direction: column; background: linear-gradient(to right top, beige, silver); border-radius: 10px;  }
   
3.         #pathBox, #resultBox { width: 100%; min-height: 100px; padding: 10px; tab-size: 4; box-sizing: border-box; resize: none; }
   
4.         #resultBox { height: 100%; }
   
5.         #msvg { width: 100%; height: 100%; }
   
6.         .mainBox button { margin-left: 16px; }
   
7.         .tMid { text-align: center; }
   
8.         .tRight { text-align: right; }
   
9.         .item { width: 100%; height: 100%; }
   
10.         .item1 { flex: 2; }
    
11.         .item2 { flex: 4; }
    
12.         .item3 { flex: 1; }
    
13. </style>
    
14. 
    
15. <div class="mainBox">
    
16.         <div class="item item1">
    
17.                 <h2 class="tMid">处理SVG path d路径数据</h2>
    
18.                 <textarea id="pathBox" placeholder="输入 d 路径数据">M0 0 C-100 100,100 100,0 0</textarea>
    
19.                 <p class="tRight">
    
20.                         <input id="cbFill" type="checkbox" name="chkbox" value="fill" checked />
    
21.                         <label for="cbFill">填充</label>
    
22.                         <input id="cbStroke" type="checkbox" name="chkbox" value="stroke" />
    
23.                         <label for="cbStroke">描边</label>
    
24.                         <button id="btnBegin" type="button" value="btn">生成SVG图像</button>
    
25.                         <button id="btnGetCode" type="button">获取SVG代码</button>
    
26.                 </p>
    
27.         </div>
    
28.         <div class="item item2">
    
29. <svg id="msvg">
    
30.         <symbol id="symbol1">
    
31.                 <path id="path1" />
    
32.         </symbol>
    
33.         <use id="use1" x="0" y="0" width="200" height="200" href="#symbol1" />
    
34. </svg>
    
35.         </div>
    
36.         <div class="item item3">
    
37.                 <textarea id="resultBox" placeholder="信息区" readonly></textarea>
    
38.         </div>
    
39. </div>
    
40. 
    
41. <script type="text/javascript">
    
42.         const ns = 'http://www.w3.org/2000/svg';
    
43.         const cbFill = document.getElementById('cbFill');
    
44.         const cbStroke = document.getElementById('cbStroke');
    
45.         const use = document.getElementById('use1');
    
46.         const sym = document.getElementById('symbol1');
    
47.         const path = document.getElementById('path1');
    
48.         const strokeColor = 'magenta';
    
49.         const fillColor = 'plum';
    
50. 
    
51.         cbFill.onclick = () => {
    
52.                 use.setAttribute('fill', cbFill.checked ? fillColor : 'none');
    
53.         };
    
54. 
    
55.         cbStroke.onclick = () => {
    
56.                         use.setAttribute('stroke', cbStroke.checked ? 'magenta' : 'none');
    
57.                 };
    
58. 
    
59.         btnBegin.onclick = () => {
    
60.                 const pathData = pathBox.value.trim();
    
61.                 if (isInvalidD(pathData)) {
    
62.                         resultBox.value = '路径不合法，请检查好后再试！';
    
63.                         return;
    
64.                 }
    
65.                 const { x, y, width, height } = getVBoxFromPath(pathData);
    
66.                 sym.setAttribute('viewBox', `${Math.ceil(x - 2)} ${Math.ceil(y - 2)} ${Math.ceil(width + 4)} ${Math.ceil(height + 4)}`);
    
67.                 resultBox.value = `viewBox(${Math.round(x)} ${Math.round(y)} ${Math.round(width)} ${Math.round(height)})`
    
68.                 path.setAttribute('d', pathData);
    
69.                 if (cbFill.checked) use.setAttribute('fill', fillColor);
    
70.                 if (cbStroke.checked) use.setAttribute('stroke', strokeColor);
    
71.         };
    
72. 
    
73.         btnGetCode.onclick = () => {
    
74.                 resultBox.value = msvg.outerHTML;
    
75.         }
    
76. 
    
77.         function getVBoxFromPath(pathstr) {
    
78.                 const tsvg = document.createElementNS(ns, 'svg');
    
79.                 tsvg.setAttribute('width', '0');
    
80.                 tsvg.setAttribute('height', '0');
    
81.                 const path = document.createElementNS(ns, 'path');
    
82.                 path.setAttribute('d', pathstr);
    
83.                 tsvg.appendChild(path);
    
84.                 document.body.appendChild(tsvg);
    
85.                 const resultData = path.getBBox();
    
86.                 document.body.removeChild(tsvg);
    
87.                 return resultData;
    
88.         }
    
89. 
    
90.         function isInvalidD(s) {
    
91.                 const reEverythingAllowed = /[MmZzLlHhVvCcSsQqTtAa0-9-,.\s]/g;
    
92.                 const bContainsIllegalCharacter = !!s.replace(reEverythingAllowed,'').length;
    
93.                 const bContainsAdjacentLetters = /[a-zA-Z][a-zA-Z]/.test(s);
    
94.                 const bInvalidStart = /^[0-9-,.]/.test(s);
    
95.                 const bInvalidEnd = /.*[-,.]$/.test(s.trim());
    
96.                 return bContainsIllegalCharacter || bContainsAdjacentLetters || bInvalidStart || bInvalidEnd;
    
97.         }
    
98. </script>

复制代码

马黑黑

提供一个较长的路径：

M 95 65 l -35 35 l -35 -35 a 25 25 90 0 1 35 -36 a 25 25 90 0 1 35 36 l -35 33 l 38 -37 l -39 36 l 41 -40 l -42 39 l 43 -42 l -44 41 l 45 -44 l -46 43 l 46 -45 l -47 44 l 47 -46 l -48 45 l 48 -47 l -49 46 l 49 -48 l -50 47 l 49 -48 l -50 47 l 50 -49 l -51 48 l 50 -49 l -51 48 l 51 -50 l -52 49 l 51 -50 l -52 49 l 51 -50 l -52 49 l 52 -51 l -53 50 l 52 -51 l -53 50 l 52 -51 l -53 50 l 52 -51 l -53 50 l 52 -51 l -53 50 l 52 -51 l -53 50 l 52 -51 l -53 50 l 51 -50 l -52 49 l 51 -50 l -52 49 l 51 -50 l -52 49 l 51 -50 l -52 49 l 50 -49 l -51 48 l 50 -49 l -51 48 l 49 -48 l -50 47 l 48 -47 l -49 46 l 47 -46 l -48 45 l 46 -45 l -47 44 l 45 -44 l -46 43 l 44 -43 l -45 42 l 42 -41 l -43 40 l 39 -38 l -40 37 l 35 -34 l -36 33 l 34 -33 l -35 32 l 34 -33 l -35 32 l 34 -33 l -35 32 l 34 -33 l -35 32 l 34 -33 l -34 31 l 32 -31 l -33 30 l 32 -31 l -32 29 l 30 -29 l -30 27 l 29 -28 l -30 27 l 28 -27 l -28 25 l 26 -25 l -26 23 l 24 -23 l -24 21 l 22 -21 l -21 18 l 19 -18 l -19 16 l 16 -15 l -15 13 l 13 -13 l -11 9 l 7 -7z

梦江南

黑黑老师辛苦了！

马黑黑

梦江南 发表于 2025-11-10 19:16
黑黑老师辛苦了！

杨帆

哇，马老师威武！让抽象的SVG path d路径数据实现了可视化，并提供了新的抓手，可操作性大大增强

小辣椒

马黑黑 发表于 2025-11-10 18:44
提供一个较长的路径：

M 95 65 l -35 35 l -35 -35 a 25 25 90 0 1 35 -36 a 25 25 90 0 1 35 36 l -35  ...

一颗红心有这么长的代码哦

小辣椒

黑黑现在是都是精品展示了

红影

这个好，可以让svg 路径展现为可见的图像，还能知道路径的宽高占位，让svg绘图学习更直观了

马黑黑

小辣椒 发表于 2025-11-10 22:12
黑黑现在是都是精品展示了

果酱果酱

马黑黑

小辣椒 发表于 2025-11-10 22:11
一颗红心有这么长的代码哦

更长的都还有

马黑黑

杨帆 发表于 2025-11-10 20:53
哇，马老师威武！让抽象的SVG path d路径数据实现了可视化，并提供了新的抓手，可操作性大大增强

马黑黑

红影 发表于 2025-11-10 22:33
这个好，可以让svg 路径展现为可见的图像，还能知道路径的宽高占位，让svg绘图学习更直观了

刚刚做了一些改进

红影

马黑黑 发表于 2025-11-10 23:24
刚刚做了一些改进

嗯，增加了填充和描边的选择

马黑黑

红影 发表于 2025-11-10 23:58
嗯，增加了填充和描边的选择

内部还加入了一个 d 属性值合法与否的正则检测机制，初筛一下非法属性值

红影

马黑黑 发表于 2025-11-11 11:56
内部还加入了一个 d 属性值合法与否的正则检测机制，初筛一下非法属性值

原来加了这么多呢

马黑黑

红影 发表于 2025-11-12 22:12
原来加了这么多呢

这东东看似简单，其实坑很多也很深。网上搜了一下，这类需求还不少，一直是个痛点。如果不借助第三方专业工具，目前的解决思路主要两种：

一是保留原始 d 数据，通过设置使用者 viewBox 去适配它。这是一楼的做法；

二是修改 d 数据，令其适配视框。这需要知道很多已知条件，比如原始 viewBox，这个最难，一般来说仅根据一个 d 数据分析不出来，但对修改尺寸而言这又不是问题（比方讲是自己原来做的路径，0 0 400 400，现在像压缩或放大路径）；另外实际修改 d 数据时，考虑的因素也很多，不同的 SVG 指令解析的逻辑和方式不同，需要一一处理，条件分支不少。可以做出来，就是没有方法一那么灵便。

红影

马黑黑 发表于 2025-11-12 23:03
这东东看似简单，其实坑很多也很深。网上搜了一下，这类需求还不少，一直是个痛点。如果不借助第三方专业 ...

玩得越是深入，需求也就越多。黑黑探索过了，我们只跟后面听讲就可以了，现在知道了使用者 viewBox 去适配是最灵便的

马黑黑

红影 发表于 2025-11-14 22:12
玩得越是深入，需求也就越多。黑黑探索过了，我们只跟后面听讲就可以了，现在知道了使用者 viewBox 去适 ...

Kimi给我详尽介绍过方法二，但它的代码很粗糙、经不起考验，需要大量修改。

Kimi可能更擅长做文案，据称，它理解长文的能力超常，百度的问心未必是它的对手。