如何在PixiJS v8中从动态生成的SVG创建纹理？

PixiJS v8调整了资源加载逻辑，不再直接支持将原始SVG字符串作为纹理源，因此v7的写法会返回undefined，直接用TextureSource.from也会报错。解决核心是将SVG字符串转换为Data URL格式，再传入纹理创建方法。

具体实现步骤 #

1. 将动态SVG字符串转为Data URL
   推荐使用encodeURIComponent处理SVG内容，避免非ASCII字符或特殊符号导致的编码问题：

   const testSVG = '<svg viewBox="0 0 100 100" width="7" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>';
   // 转换为Data URL
   const svgDataUrl = `data:image/svg+xml,${encodeURIComponent(testSVG)}`;
   

2. 用Data URL创建纹理
   直接使用PIXI.Texture.from加载Data URL即可：

   const texture = PIXI.Texture.from(svgDataUrl);
   

   若需显式使用TextureSource，注意该方法是异步的，需配合await：

   // 异步场景下使用
   const textureSource = await PIXI.TextureSource.from(svgDataUrl);
   const texture = PIXI.Texture.from(textureSource);
   

关键说明 #

• v8的资源系统仅识别标准资源类型（如URL、Blob、Image元素等），Data URL属于合法的URL资源，因此可以被正确解析。
• 如果SVG内容仅包含ASCII字符，也可以使用Base64编码的方式：data:image/svg+xml;base64,${btoa(testSVG)}，但encodeURIComponent的兼容性和容错性更强。

内容的提问来源于stack exchange，提问作者Rip