Размытый SVG в pixijs ⇐ Android

[Anonymous]

Я пытаюсь использовать библиотеку PIXIJs для отображения изображения SVG, но на смартфоне SVG кажется размытым.

Вот пример кода

Код: Выделить всё

    var $ = window.jQuery;
var PIXI = window.PIXI;

$(document).ready(onReady);

var devicePixelRatio;
var width =800;
var height=600;

var scale = 5;
var renderer;
var stage;

var canvas;

function onReady() {
devicePixelRatio = $(window).devicePixelRatio;

canvas = window.document.createElement("canvas");
canvas.style.width = width + "px";
canvas.style.height = height + "px";

var container = document.getElementById("container");
container.appendChild(canvas);

var svgimgtag = document.getElementById("svgimgtag");

svgimgtag.style.top = 160 + "px";
svgimgtag.style.left = 500 + "px";
svgimgtag.style.width = 64 * scale + "px";
svgimgtag.style.height = 64 * scale + "px";
svgimgtag.src = 'https://rawgit.com/dentez/848fe2b6a8da7b3a78bacded90bd4f61/raw/89bb179753df9ee3e8b62d8c7a0c7620b6db144e/bee.svg';

renderer = PIXI.autoDetectRenderer(width , height , {
backgroundColor: 0xFFFFFF,
view: canvas,
resolution: devicePixelRatio
});

stage = new PIXI.Stage(0xFFFFFF);

document.body.appendChild(renderer.view);
renderer.view.style.position = 'absolute';

requestAnimationFrame(update);

beeTexture = new PIXI.Texture.fromImage('https://rawgit.com/dentez/848fe2b6a8da7b3a78bacded90bd4f61/raw/89bb179753df9ee3e8b62d8c7a0c7620b6db144e/bee.svg', undefined, undefined, scale);

var bee = new PIXI.Sprite(beeTexture);

bee.anchor.x = 0.5;
bee.anchor.y = 1;
bee.position.x = 400;
bee.position.y = 300;
//bunny.scale.set(1);
stage.addChild(bee);
renderer.resize(width, height);
}

function update() {

renderer.render(stage);
requestAnimationFrame(update);
}

В браузере настольного компьютера все выглядит нормально, но когда я пробую это на своем смартфоне или эмуляторе Android, SVG отображается следующим образом:




(изображение слева — PIXI-SVG, справа — файл; html img tag).

Может быть, это что-то с devicePixelRatio, кажется, что браузер «увеличивает масштаб», чтобы соответствовать экрану - так как на рабочем столе, если я увеличиваю масштаб Я могу подражать тому же поведению.
Что я делаю не так? Как правильно отображать/масштабировать SVG?

Подробнее здесь: https://stackoverflow.com/questions/485 ... -in-pixijs