我不认为这是因为它是 SVG，而只是因为您对其进行了缩放。 默认情况下，WebGL 中的缩放是双三次的，而画布中的缩放是线性的。 这意味着它会变得模糊。 您应该适当调整图像大小然后渲染它。

Pixi.js 是位图渲染器，而不是矢量渲染器，这意味着渲染 SVG 并没有比 png/jpg 带来任何好处。

大家好，

@englercj是正确的。 Pixi 会在您加载 SVG 时对其进行光栅化。目前它对 svg 没有真正的支持。 如果有足够的需求，我们计划进一步研究这一点。

谢谢！

重新开放这个，因为人们显然想要它，但还没有把它放在一个里程碑上。

如果有人想为此编写 v3 插件，我很乐意提供帮助。 我们将首先制作一些其他很棒的插件，所以这可能需要一段时间，除非社区接受它！

将比例更改为 1，就像在 spriteSVG.scale.set(1); 中一样。 编辑 SVG 文件中的第一个标签...将视口的大小加倍，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 200 200">

也许有人可以编写一个例程来执行此操作，然后根据结果制作纹理。

我会发布一个修改过的 jsfiddle，但我无法解决跨源资源共享问题。

在过去的几个小时里，我一直在研究 SVG 到 PIXI.Graphics 的转换，而且效果很好：

https://github.com/saschagehlich/pixi-svg-graphics

你可以在这里看到一个演示：
http://filshmedia.net/lab/pixi-svg/
（PIXI.Container 放大到 10 倍（原始 SVG 像 80x80），它仍然很脆）

它尚未完全实现，但我尝试了几个 SVG 文件，我认为这是一个好的开始。 不幸的是，复杂的几何图形现在不起作用，但我会在接下来的几天内研究它。

如果有人想提供帮助 - 请随时做出贡献。 :)

+1

游戏中的大量资产并不真正适合那么一切的概念都是一个光栅

我的 PIXI-SVG-Graphics 项目现在支持复杂路径，使其可用。 另外，我将它作为模块发布在 npm 上： https ://www.npmjs.com/package/pixi-svg-graphics

我更喜欢利用浏览器 SVG 渲染引擎而不是实现新渲染引擎的解决方案。

我的想法是创建一个 Sprite（和/或 BaseTexture）“SVGSprite”的子类。 如果使用 webGL 渲染器，则必须将 svg 渲染为显示大小的纹理，以免变得模糊。

想法：

• 以 webgl 渲染器所需的确切大小创建一个 2d 画布
• 使用 .drawImage(svg_file,0, 0); 在二维画布上
• 使用 2d 画布作为 webGL 渲染器的纹理

大小必须使用全局变换矩阵来确定，这样即使 SVGSprite 是一个缩放容器，也能正确计算缩放。 SVGSprite 必须具有更新功能，以便重做计算和源画布。

这样浏览器支持的所有 SVG 功能都可以在 pixi 中工作，并且结果是非模糊的。

@FlorianLudwig所以像https://gist.github.com/biovisualize/8187844这样的东西与PIXI.Texture.fromCanvas一起使用，如果 SVG 的属性像mySVG.setAttribute("transform", "scale(50 50)");一样更改，则可以通过某种方式更新图像的画布版本

@saschagehlich

我的 PIXI-SVG-Graphics 项目现在支持复杂路径，使其可用。

看起来基本的东西仍然缺失？

这种代码

    var canvas = document.createElement ('canvas');
    canvas.width = ...; canvas.height = ...;
    canvas.getContext ('2d').drawImage (svgImage, 0, 0, canvas.width, canvas.height);

    var sprite = new PIXI.Sprite (new PIXI.Texture (new PIXI.BaseTexture (canvas)));

允许在不改变 svg 的情况下创建具有所需分辨率的精灵（除非你想拉伸它，然后你必须将preserveAspectRatio="none"到 svg 标签）。

如果您希望“+1”此问题，请使用 GitHub 反应来+1 原始帖子。 我将删除此线程中的所有“+1”消息，因为它只是噪音，无法在此处阅读对话。

我修改了纹理代码以支持这一点，第 4 个参数采用 svg 的比例，如下所示：

new PIXI.Texture.fromImage('bunny.svg', undefined, undefined, 2.0);

我分叉了 bunnymark，您可以通过在此处更改 JS 中的第 66 行来使用比例尺：
http://codepen.io/anon/pen/pyXMzR。

@englercj ，如果这看起来https :

通过这种方式，可以在调整窗口大小时缩放和重新光栅化纹理，以便场景具有响应性，并且仍然具有 pixi 提供的高性能。

公关： https :

PR 合并，关闭！

这在 Chrome 和 FF 中运行良好，但在 IE11 中不起作用。 我用这行代码得到了 SecurityError

let tiger = new Sprite(new PIXI.Texture.fromImage('images/tiger.svg', true, PIXI.SCALE_MODES.LINEAR, 8.0)); 

如何解决这个问题？

啊，好 ol' SecurityError。 这是 IE11 中的一个错误，已在 Edge 中修复，但在 IE11 中未修复：

https://github.com/pixijs/pixi.js/issues/2928

除了将 SVG 转换为 PNG，您无能为力

很高兴知道。 谢谢提示。

上午 14.12.2017 08:10 schrieb“Sascha Gehlich”通知@github.com：

啊，好 ol' SecurityError。 这是 IE11 中已修复的错误
Edge，但不在 IE11 中：

2928 https://github.com/pixijs/pixi.js/issues/2928

除了将 SVG 转换为 PNG，您无能为力

—
您收到此消息是因为您发表了评论。
直接回复本邮件，在GitHub上查看
https://github.com/pixijs/pixi.js/issues/936#issuecomment-351627238或静音
线程
https://github.com/notifications/unsubscribe-auth/AAu1ZuPEIl_MUskNn1grboYcBl6Vxdxlks5tAMnfgaJpZM4CaLFV
.

我正在尝试使用 PIXI.Texture.fromImage 像上面解释的那样显示 SVG 图像，但是在智能手机上，SVG 看起来很模糊。

这里有一个示例代码https://codepen.io/anon/pen/QaxqvP
在桌面浏览器上似乎没问题，但是当我在智能手机或安卓模拟器上尝试时，SVG 呈现如下：
https://imgur.com/VbXlypP （左图为 PIXI-SVG；右图为 html img 标签）。

也许它与devicePixelRatio有关，似乎浏览器“放大”以适应屏幕 - 因为在桌面上，如果我放大我可以模拟相同的行为。
在像素比大于 1 的设备上显示/缩放 SVG 的正确方法是什么？

对我来说看起来并不模糊。 屏幕截图来自 iPhone X。

放大你的截图，你会看到它。 你的没有我的那么模糊，但它是模糊的。

我正在尝试上面的例子，但出于某种原因，

let texture = new PIXI.Texture.fromImage('../assets/heart.svg', false, undefined, 2);

投掷

ERROR Error: The SVG image must have width and height defined (in pixels), canvas API needs them.

如果我先加载图像

PIXI.loader.add("../assets/heart.svg").load(...)

错误没有被抛出，但是包含来自new PIXI.Texture.fromImage的纹理的渲染精灵都是像素化的，这让我相信 SVG 没有正确渲染。 此外，更改sourceScale似乎没有任何效果。

编辑 1

所以我刚刚看到sourceScale在使用加载器加载纹理时不起作用（https://github.com/pixijs/pixi.js/issues/4543）。 我将继续研究为什么会抛出错误。

编辑 2

我的 svg 的宽度和高度定义如下： <svg width="38.148697mm" height="32.77169mm" ...> 。 事实证明，当以“mm”指定尺寸时，PIXI 会引发错误。 删除了“mm”，一切正常。

@maximedupre由于浏览器限制，只有 px 值有效。 这就是抛出错误的原因，以便您知道需要修改 svgs。

由于关闭后没有任何近期活动，因此该线程已自动锁定。 请为相关错误打开一个新问题。