如何在Pixi.js中从字符串加载SVG？

太懂这种需求了！直接把SVG写在JS里当字符串用，不用额外维护单独的SVG文件，确实省心。可惜Pixi的Assets.load()确实只认文件路径或者Data URL，不认原生的SVG字符串，不过有两个很实用的解决办法：

方法一：把SVG字符串转成Data URL（适配Assets.load()） #

这是最贴合你现有代码逻辑的方案——把SVG字符串包装成Data URL格式，这样Assets.load()就会把它当成普通的图片资源来加载了。记得用encodeURIComponent()处理一下字符串，避免特殊字符（比如"、#号）导致解析失败：

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>';
// 转成Data URL格式
const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
// 现在就能用你熟悉的Assets.load加载了
const texture = await Assets.load(svgDataUrl);

方法二：直接解析SVG字符串创建纹理（跳过Assets.load()） #

如果你不想绕URL的路子，也可以直接调用Pixi的SVG解析工具，从字符串直接生成纹理，步骤更直接：

import { SVG, Texture } from 'pixi.js';

const svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>';
// 从字符串创建SVG显示对象
const svgElement = SVG.from(svgString);
// 把SVG对象转成纹理
const texture = Texture.from(svgElement);

小提醒 #

• 不管用哪种方法，你的SVG字符串里一定要包含xmlns="http://www.w3.org/2000/svg"这个命名空间，不然Pixi可能解析失败。
• 如果SVG里引用了外部资源（比如自定义字体、外部图片），用字符串加载的话这些资源大概率加载不出来，这时候还是老老实实用文件路径加载更稳妥。

备注：内容来源于stack exchange，提问作者Nikolay Dyankov