blobs2.svg()直接生成标准svg字符串，开箱即用；需补全xml声明和xmlns命名空间、设置viewbox才能被设计软件正常打开，且支持原生dom操作与css交互。
直接用 blobs/v2 生成 SVG 字符串，别碰 Canvas 或 Base64
blobs 库的 blobs2.svg() 是专为生成有机 blob 形状设计的，输出就是标准 SVG 字符串，开箱即用，无需转码、不占内存、不触发下载限制。Canvas 或 Base64 路径全是绕远路：Canvas 需先渲染再截图（位图），Base64 需解码再构造 Blob（易出错且无矢量优势）。你真正要的，是可编辑、可缩放、可嵌入 CSS 的纯 SVG。
-
blobs2.svg()返回字符串，直接赋值给innerHTML或写入<svg></svg>容器即可显示 - 参数如
seed控制形状唯一性，extraPoints和randomness决定边缘复杂度，size对应 viewBox 尺寸 - 避免传入非法
seed（如undefined或NaN），否则生成空字符串，控制台无报错但页面空白 - 不建议在循环中高频调用——每个 blob 生成都涉及随机路径计算，连续生成 10+ 个可能造成轻微卡顿
给生成的 blob 添加交互和样式，靠原生 SVG DOM 能力
SVG 元素本质是 XML 节点，所有 <path></path> 都暴露在 DOM 中，可直接加 class、监听 click、用 CSS 动画。这比 Canvas “画完即弃”强得多。你不需要重绘整个 canvas，只需改一个 fill 属性或加个 transform。
- 生成后立即用
querySelector('path')拿到路径节点，绑定addEventListener('click', ...) - CSS 中用
svg path:hover { fill: #ff6b6b; transition: fill 0.3s; }实现悬停变色 - 若需动画形变，别用
requestAnimationFrame重绘——改用<animate></animate>标签或 CSS@keyframes驱动d属性（需配合 pathData polyfill） - 注意：iOS Safari 对内联 SVG 的
transform支持不稳定，优先用translate(x,y)而非matrix()
导出为文件时，补全 XML 声明和命名空间，否则软件打不开
只拿 outerHTML 是不够的。很多设计软件（如 Figma、Illustrator）或系统预览器会拒绝解析缺少 XML 头和命名空间的 SVG 字符串，表现为“文件损坏”或空白。这不是浏览器问题，是格式校验失败。
- 导出前拼接：
`<?xml version="1.0" encoding="UTF-8"?>` + svgString - 确保根
<svg></svg>包含xmlns="http://www.w3.org/2000/svg"，没有就用replace(/<svg xmlns="http://www.w3.org/2000/svg"> 注入</svg> - 必须设
viewBox（如viewBox="0 0 256 256"），否则导出后尺寸异常，缩放失真 - 用
new Blob([fullSvg], { type: 'image/svg+xml' })创建 Blob，别用text/plain—— MIME 类型错会导致 Chrome 下载成 .txt
批量生成多个 blob 时，用 seed 区分，别依赖 Math.random()
同一帧内多次调用 blobs2.svg({ seed: Math.random() }) 极大概率拿到重复 seed，导致生成相同图形。这不是 bug，是浮点数精度和 JS 执行速度共同造成的事实。
- 用递增整数或哈希字符串做 seed，例如
i.toString(36)或crypto.randomUUID().slice(0,8) - 如果需要“随机但可复现”，把 seed 存进 URL 参数或 localStorage，方便调试和分享
- 避免在 React/Vue 组件的 render 函数里无条件调用
blobs2.svg()—— 每次 re-render 都新生成，DOM 频繁替换，性能差且状态丢失 - 大量 blob（>50 个）同时挂载时，建议用
document.createDocumentFragment()批量插入，减少重排
viewBox。不是代码跑不通，而是文件“看起来对”，打开却一片空白。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
