动态生成的 SVG 到 PixiJS 纹理

问：

我已将此代码笔转换为 PixiJS 7 和 GSAP 3：https://codepen.io/ripmurdock/pen/zYMqNGo?editors=0011

我想使用动态生成的 SVG 作为纹理。

将动态生成的 SVG（例如此类）转换为 Pixi 纹理的正确方法是什么？

我试过这个字符串。我还尝试将字符串转换为 base64，并尝试在 base64 字符串前加上“data：image/svg+xml;base64”，

这是 codepen javascript：

gsap.config({trialWarn: false})
console.clear();

var baseUrl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/";

const app = new PIXI.Application({autoResize: true, backgroundAlpha: 0});  // autoResize: true,  //const app = new PIXI.Application({height: fbh+10, width: fbh*1031/244, backgroundAlpha: 0});  //BackgroundAlpha: 0 // width: 1118, height: 264, fbh*1031/244
resize()


app.stage.eventMode = 'auto'

var baseUrl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/";
const texturePromise = PIXI.Assets.load(baseUrl + "awesome250.png");

texturePromise.then(function(resolvedTexture) {init(resolvedTexture);});


var minX = 0;
var minY = 0;
var maxX = window.innerWidth;
var maxY = window.innerHeight;

var gravity = 0.5;
var total   = 0;
var batch   = 12;
var limit   = 5000;

var ease  = Power0.easeNone;

var faces = [];
var isAdding = false;


var view = document.querySelector("main");
view.appendChild(app.view);  


let container = new PIXI.ParticleContainer(limit, {
  scale: true,
  position: true,
  rotation: true,
  uvs: false,
  alpha: true
});
  
var texture;

app.stage.addChild(container);

//
// AWESOME FACE
// ========================================================================
class AwesomeFace extends PIXI.Sprite {
  
  constructor(texture) {
    super(texture);
        
    var repeat = -1;
    var yoyo = true;
    var time1  = Math.random()*(3-0.5)+0.5
    var time2  = Math.random()*(4.5-2)+2
    var time3  = Math.random()*(4.5-2)+2
    var prog1  = Math.random()
    var prog2  = Math.random()
    var prog3  = Math.random()
    var scale  = Math.random()*0.5
    //var alpha  = Math.random()*(1-0.4)+0.4
    var alpha  = 1
    var speedX = (Math.random()*(10+10)-10) * (-1 + Math.round(Math.random()) * 2) 
    var speedY = (Math.random()*(10-2)+2) * (-1 + Math.round(Math.random()) * 2)   
    //var speedY = Math.random()*(10-2)+2    
    //var startX = Math.random()*(maxX)
    var startX = .5*(maxX)
    var startY = .5*(maxY)
    var angle  = (-1 + Math.round(Math.random()) * 2) * Math.PI * 2

    this.anchor.set(0.5);
    this.pivot.set(0.5);
    this.scale.set(0.1);
    
    this.x = startX;
    this.y = startY; 
    this.alpha = alpha;               
    this.rotation = 0;    
    
    this.speed = new PIXI.Point(speedX, speedY);
        
    gsap.to(this,{ repeat, ease, rotation: angle, duration: time1, }).progress(prog1);    
    gsap.to(this,{ repeat, ease, yoyo, alpha: 1, duration: time2, }).progress(prog2);
    gsap.to(this.scale,{ repeat, ease, yoyo, x: 1, y: 1, duration: time3, }).progress(prog3);   
  }
  
  update() {
    
    this.x += this.speed.x;
    this.y += this.speed.y;
    //this.speed.y += gravity;
    
    if (this.x > maxX) {
      
      this.x = maxX;
      this.speed.x *= -1;
      
    } else if (this.x < minX) {
      
      this.x = minX;
      this.speed.x *= -1;
    }
    
    if (this.y > maxY) {
      
      this.y = maxY;
      this.speed.y *= -1;
      
    } else if (this.y < minY) {
      
      this.y = minY;
      //this.speed.y = 0;
      //this.speed.y = 0;
      this.speed.y *= -1;
    }
  }
}

//
// INIT
// ========================================================================
function init(resolvedTexture) {

  texture = resolvedTexture

  var visible = true;
  
  var toggle = event => {
    
    isAdding = !isAdding;
    
    if (visible) {
      visible = false;

      gsap.to("#info", { autoAlpha: 0, duration: 1 });
    }
  };
  
  document.addEventListener("touchstart", toggle);
  document.addEventListener("touchend", toggle);
  document.addEventListener("mousedown", toggle);
  document.addEventListener("mouseup", toggle);
    
  window.addEventListener("resize", resize);

  gsap.ticker.add(render);
  gsap.set("main", { autoAlpha: 1 });

  createFaces(Math.random()*(batch-4)+4);
}

//
// CREATE FACES
// ========================================================================
function createFaces(count) {

  for (var i = 0; i < count; i++) {    
    gsap.delayedCall(Math.random()*0.5, createFace);
    //createFaces();
  } 
  
  function createFace() {
        
    var face = new AwesomeFace(texture);
    
    faces.push(face);
    container.addChild(face);
    total++
  }
}

//
// RESIZE
// ========================================================================
function resize() {

  maxX = window.innerWidth;
  maxY = window.innerHeight;

  app.renderer.resize(maxX, maxY);
}

//
// RENDER
// ========================================================================
function render() {
    
  if (isAdding && total < limit) {
    createFaces(batch);
  }

  for (var i = 0; i < total; i++) {
    faces[i].update();
  }
  
  app.renderer.render(app.stage);
}