Pixi js how to render svg

Question

I am trying to create a game using svg images for scalability and for the procedural creation of physical objects from them (see .js article for).

The problem I ran into is to load 2 different svg textures and then render them, and the second one has rendering rendered with fists on it.

This does not happen with bitmaps and does not happen with canvas options, only webgl.

Is there a way to stop this or am I doing svgs wrong?

var renderer = PIXI.autoDetectRenderer( window.innerWidth, window.innerHeight, { backgroundColor : 0x000000, 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('image/svg/gear.svg'); var gear = new PIXI.Sprite(texture); //position and scale gear.scale = {x:0.3,y:0.3}; 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('image/svg/heart.svg'); var heart = new PIXI.Sprite(texture2); //position and scale heart.scale = {x:0.3,y:0.3}; 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); }