Pixi.JS：使用Pixi Loader加载内联SVG生成纹理的方法

当然可以，实现思路很直接——把内联SVG转换成Data URL，再用Pixi Loader加载这个Data URL就行，完全能满足你减少网络请求的需求。

具体实现步骤 #

• 准备内联SVG字符串
  把你的SVG代码写成字符串，用模板字符串包裹可以避免转义双引号的麻烦，示例：

  const inlineSvg = `
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="40" fill="#ff4444" />
    </svg>
  `;
  

• 转换为Data URL
  有两种常见方式生成Data URL：

  1. Base64编码（兼容性更好）：

  const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(inlineSvg)))}`;
  

  2. URI直接编码（代码更简洁，现代浏览器都支持）：

  const svgDataUrl = `data:image/svg+xml,${encodeURIComponent(inlineSvg)}`;
  

• 用Pixi Loader加载
  把Data URL当作普通纹理资源传入Loader，就能正常获取加载进度和生成纹理：

  const loader = PIXI.Loader.shared;
  
  loader.add('inlineSvgTex', svgDataUrl)
    .on('progress', (loader) => {
      console.log(`加载进度：${Math.floor(loader.progress)}%`);
    })
    .load((_, resources) => {
      const sprite = new PIXI.Sprite(resources.inlineSvgTex.texture);
      app.stage.addChild(sprite);
    });
  

几个注意点 #

• PixiJS v7及以上版本都兼容这个逻辑，旧版本只需调整Loader实例化方式，核心流程不变。
• 内联SVG里的外部资源（比如外部字体、引用的图片）可能失效，建议把样式直接写在SVG的style属性或内部<style>标签里。
• 可以提前修改SVG的width/height属性，控制最终纹理的分辨率，避免拉伸模糊。

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