javascript - 如何用 PixiJS 渲染 SVG？

Question

我正在尝试使用 SVG 图像制作游戏以实现可扩展性并从中按程序制裁剪理对象(有关操作方法，请参阅 matter.js)。

我遇到的问题是，如果我加载 2 个不同的 SVG 纹理然后渲染它们，第二个在第一个下面有一层。

这不会发生在光栅图像上，也不会发生在 Canvas 选项上，只有在 WebGL 上才会发生。

有没有办法阻止这种情况，还是我做错了 SVG？

var renderer = PIXI.autoDetectRenderer(
    window.innerWidth, 
    window.innerHeight, 
    {
        backgroundColor : 0xffffff,
        resolution:2
    }
);

// add viewport and fix resolution doubling
document.body.appendChild(renderer.view);
renderer.view.style.width = "100%";
renderer.view.style.height = "100%";

var stage = new PIXI.Container();

//load gear svg
var texture = PIXI.Texture.fromImage('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Gear_icon_svg.svg/2000px-Gear_icon_svg.svg.png');
var gear = new PIXI.Sprite(texture);

//position and scale
gear.scale = {x:0.1,y:0.1};
gear.position = {x:window.innerWidth / 2,y:window.innerHeight / 2};
gear.anchor = {x:0.5,y:0.5};

//load heart svg
var texture2 = PIXI.Texture.fromImage('https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Love_Heart_SVG.svg/2000px-Love_Heart_SVG.svg.png');
var heart = new PIXI.Sprite(texture2);

//position and scale
heart.scale = {x:0.1,y:0.1};
heart.position = {x:window.innerWidth/4,y:window.innerHeight / 2};
heart.anchor = {x:0.5,y:0.5};

//add to stage
stage.addChild(gear);
stage.addChild(heart);

// start animating
animate();
function animate() {
    gear.rotation += 0.05;

    // render the container
    renderer.render(stage);
    requestAnimationFrame(animate);

}

<script src="https://github.com/pixijs/pixi.js/releases/download/v4.8.2/pixi.min.js"></script>

Answer 1

好吧，这个例子似乎工作得很好!

var beeSvg = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/bee.svg";
beeTexture = new PIXI.Texture.fromImage(beeSvg, undefined, undefined, 1.0);
var bee = new PIXI.Sprite(beeTexture)

查看更多信息:https://codepen.io/osublake/pen/ORJjGj