Javascript 如何使用PixiJS呈现SVG？

我正在尝试使用SVG图像制作一个游戏，以实现可伸缩性，并从中按程序制作物理对象（请参阅了解如何制作）

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

光栅图像不会出现这种情况，画布选项也不会出现这种情况，只有WebGL才会出现这种情况

有没有办法阻止这一切，还是我做错了SVG

var renderer=PIXI.autodetectedrenderer(
window.innerWidth，
窗高，
{
背景颜色：0xffffff，
决议：2
}
);
//添加视口并修复分辨率加倍
document.body.appendChild（renderer.view）；
renderer.view.style.width=“100%”；
renderer.view.style.height=“100%”；
var stage=new PIXI.Container（）；
//负载齿轮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=新的PIXI.Sprite（纹理）；
//位置和规模
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}；
//负载心脏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=新的PIXI.Sprite（纹理2）；
//位置和规模
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}；
//上台
阶段。添加儿童（齿轮）；
阶段。addChild（心脏）；
//开始制作动画
制作动画（）；
函数animate（）{
齿轮转动+=0.05；
//渲染容器
渲染器。渲染（舞台）；
请求动画帧（动画）；
}

---

所以我觉得你把一些概念混在一起了

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

但是，此特性在WebGL中不可能实现，因为WebGL将图像光栅化。有点像在Photoshop上截图并将其放在图层中。您可以操纵该图像，但如果不开始看到像素，就无法缩放它

简单的回答是，在WebGL中不能使用SVG来实现图形的“缩放”

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

---

您正在加载2个png纹理并覆盖它们。

好吧，这个示例似乎运行得很好

var-beeSvg=”https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/bee.svg";
beeTexture=new PIXI.Texture.fromImage（beeSvg，未定义，未定义，1.0）；
var bee=新的PIXI.雪碧（beeTexture）

---

更多信息请访问：

您找到解决方案了吗？这听起来像是浏览器和/或pixi.js的bug。你还看到这种行为吗？不清楚你所说的“我遇到的问题是，如果我加载两种不同的SVG纹理，然后渲染它们，第二种纹理下面有第一层。”是什么意思。你能看穿你的SVG吗？它是一个透明的svg吗？你能添加一个屏幕截图来突出这个问题吗？我不明白你为什么要使用SVG作为纹理。为什么不直接导入SVG中的.png呢？在WebGL中没有矢量图像的概念。我相信问题提供的示例是使用PNG，而不是SVG。查看传递到

PIXI.Texture.fromImage（）

的URL。URL以

2000px-Gear\u icon\u svg.svg.png

和

2000px-Love\u Heart\u svg.svg.png

结尾。这些是PNG文件，不是SVG文件。所以无论这里发生了什么行为，我怀疑这与SVG vs PNG无关。我也不明白为什么这种行为是不正确的。您可以将SVG转换为纹理，但当您向WebGL提供图像时，您仍然在提供图像。jpg，png，而不是svg。如果这就是你的观点，是的，你可以将svg转换成jpg并反馈给jpg。但是您不能在需要图像的地方提供svg。也不是一个字符串或其他数据类型并期望它工作Pixi可以做到这一点，但例如three.js不能做到。因此，在幕后，他们将SVG转换为图像。但GPU不接受SVG，这是我唯一的观点。这是一个讨论添加特性的问题。在translatez旁边的第86行添加

scale（5）

，看看这是否仍然是矢量图形这显然会将SVG呈现为光栅。