これはSVGだからではなく、スケーリングしたからだと思います。 WebGLでのスケーリングは、デフォルトではバイキュービックであり、キャンバスでは線形です。 つまり、ぼやけます。 画像のサイズを適切に設定してからレンダリングする必要があります。

Pixi.jsはビットマップレンダラーであり、ベクターレンダラーではありません。つまり、SVGをレンダリングしても、png / jpgなどよりもメリットはありません。

やあみんな、

@englercjは正しいです。 Pixiは、SVGをロードすると、SVGをラスター化します。現時点では、svgは実際にはサポートされていません。 これは、十分な需要がある場合に、今後さらに調査する予定です。

ありがとう！

人々は明らかにそれを望んでいるのでこれを再開しますが、まだマイルストーンには入れていません。

誰かがこのためのv3プラグインを書きたいと思ったら、私はそれを手伝って喜んでいます。 私たちが最初に作成する他の素晴らしいプラグインがいくつかあるので、コミュニティがそれを実行するためにそれを受け入れない限り、これはしばらくの間かもしれません！

spriteSVG.scale.set（1）;のように、スケールを1に変更します。 SVGファイルの最初のタグを編集します...次のようにビューポートのサイズを2倍にします。

<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 ：

新しいレンダリングエンジンを実装するのではなく、ブラウザーのSVGレンダリングエンジンを活用するソリューションをお勧めします。

私のアイデアは、Sprite（および/またはBaseTexture）「SVGSprite」のサブクラスを作成することです。 webGLレンダラーを使用する場合は、svgを表示されたサイズのテクスチャにレンダリングして、ぼやけないようにする必要があります。

アイデア：

• webglレンダラーに必要な正確なサイズで2Dキャンバスを作成します
• .drawImage（svg_file、0、0）;を使用します。 2Dキャンバス上
• webGLレンダラーのテクスチャとして2Dキャンバスを使用する

サイズは、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を変更せずに必要な解像度でスプライトを作成できます（ストレッチする場合を除いて、svgタグにpreserveAspectRatio="none"を追加する必要があります）。

この問題を「+1」したい場合は、GitHubリアクションを使用して元の投稿を+1してください。 このスレッドの「+1」メッセージは単なるノイズであり、ここで会話を読むことができないため、削除します。

これをサポートするようにTextureコードを変更しました。4番目のパラメーターは、次のようにsvgのスケールを取ります。

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

私はバニーマークをフォークしました、そしてあなたはここでJSから66行目を変えることによってスケールで遊ぶことができます：
http://codepen.io/anon/pen/pyXMzR。

@englercj 、これで問題がなければPRを作成できます： https ：

このようにして、ウィンドウのサイズ変更時にテクスチャをスケーリングおよび再ラスタライズできるため、シーンは応答性が高く、pixiが提供する高いパフォーマンスを維持できます。

PR： https ：

PRが統合され、これが終了しました。

これはChromeとFFではうまく機能しますが、IE11では機能しません。 このコード行でSecurityErrorが発生しました

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

これを修正する方法は？

ああ、古き良きSecurityError。 これは、Edgeで修正されたIE11のバグですが、IE11では修正されていません。

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

SVGをPNGに変換する以外にできることは何もありません

知っておくと良い。 ヒントをありがとう。

午前14.12.201708：10 schrieb "Sascha Gehlich" [email protected] ：

ああ、古き良きSecurityError。 これはIE11のバグであり、
エッジですが、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
デスクトップブラウザでは問題ないようですが、スマートフォンまたはAndroidエミュレータでこれを試すと、SVGは次のようにレンダリングされます。
https://imgur.com/VbXlypP （左側の画像はPIXI-SVG、右側はhtml imgタグです）。

たぶんそれはdevicePixelRatioの何かで、ブラウザは画面に合わせて「ズームイン」しているようです。デスクトップではズームインすると同じ動作をエミュレートできるからです。
ピクセル比が1より大きいデバイスでSVGを表示/スケーリングする正しい方法はどのようになっていますか？

私にはぼやけて見えません。 スクリーンショットはiPhoneXのものです。

スクリーンショットを拡大すると、表示されます。 あなたは私のものよりぼやけていませんが、ぼやけています。

上記の例を試していますが、何らかの理由で、

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値のみが機能します。 そのため、svgを変更する必要があることがわかるように、エラーがスローされます。

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。