如何用PixiJS渲染SVG？

Question

我正在尝试使用SVG图像制作一个游戏,以实现可伸缩性,并从程序上制作物理对象(请参阅参考资料.js).

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

光栅图像不会发生这种情况,只有使用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

Answer 2

因此，我认为您正在混淆一些概念。

SVG是一回事，而WebGL是另一回事。SVG由浏览器呈现，您可以放大或缩小它们，而不会损失质量/分辨率或任何您想调用的名称。

但是，此特征在WebGL中是不可能的，因为WebGL光栅化图像。有点像截屏并将其放在Photoshop的一个图层中。您可以操纵该图像，但是您不能在不开始看到像素的情况下缩放它。

如此简短的答案是，您不能在WebGL中使用SVG来希望使图形“缩放”。

关于上面的示例，结果是预期的。

您正在加载2个png纹理并将其覆盖。