2026 · 工具实测DrawSVG实测拿一个真实需求测它：画动画长图01原来是手拼字符串THE OLD WAY每一行都要记住三件事：属性顺序、路径长度、CSS 变量怎么塞def line(self, x1, y1, x2, y2, w=3): L = math.hypot(x2 - x1, y2 - y1) self.p.append( f'<path class="gw" style="--len:{L:.1f}"' f'd="M{x1} {y1} L{x2} {y2}" stroke-dashoffset="{L:.1f}"/>')嵌套引号多了眼睛会花，打错属性名浏览器直接忽略 —— 你只会看到「那个东西没出来」02DrawSVG 的写法THE SAME LINE, TWO WAYS同一个圆，一行：d.append(dw.Circle(cx, cy, r, fill="none", stroke=col, stroke_width=sw))差别在三点：不用拼字符串属性是关键字参数，写错直接 TypeError不用记 SVG 语法stroke-width 写成 stroke_width，下划线自动转连字符元素可以复用Drawing 能 append 到另一个 Drawing 里03它替你算的几何GEOMETRY HELPERSdw.Path(stroke="#000", fill="none") .M(x, y).L(x2, y2) # 折线 .Q(cx, cy, x, y) # 二次贝塞尔 .C(cx1, cy1, cx2, cy2, x, y) # 三次贝塞尔 .A(rx, ry, rot, arc, sweep, x, y) # 圆弧手写时这些 d 属性全得自己拼，参数顺序记错只能去查 MDN动画还得自己接DrawSVG 的动画路线是逐帧渲染，不是 CSS 动画：d.as_animation_frames(frames=60) → as_gif() / as_mp4()7000px 的长图逐帧 60 帧 = 60 张位图，不划算滚动触发更是运行时行为，没法逐帧做05实测对比BENCHMARK代码行数116→98生成体积5.2 KB→4.9 KB元素数35→35代码少 18 行，主要是省掉了那些 f"..." 的拼接。06两个真实的坑GOTCHAS1count() 不是无参的d.count() 报 TypeError，要总数得 len(list(d.all_elements()))2class 参数是 class_Python 关键字冲突，写 class= 直接 SyntaxError07什么时候用它WHEN TO USE适合要画复杂几何（贝塞尔、圆弧、箭头）要复用图形组件（页头页脚、图标）要导出 GIF / MP4要在 Jupyter 里交互不适合只要几根线几个字要做滚动触发动画要精确控制 SVG 结构08我最后怎么用的CONCLUSION画图 DrawSVG（省掉字符串拼接）动画 CSS transition（手写）触发 IntersectionObserver（手写）部署 单文件 HTML（不上构建链）DrawSVG 解决「怎么把图形描述成代码」，不解决「怎么让它在浏览器里动起来」。一句话它把「手拼 SVG 字符串」这件苦差事消掉了，值得用；但它不是动画框架，别指望它替你解决触发和时序。note.zhongyangblog.eu.org