Как я могу масштабировать SVG <image>при сохранении целых пикселей? - PullRequest
Новая
       27

Как я могу масштабировать SVG <image>при сохранении целых пикселей?

5 голосов
/ 04 января 2011

У меня есть изображение в стиле pixelart, которое намеревается увеличить до 4x с помощью SVG.Однако следующий код размывает пиксели изображения: 

<image x="0" y="0" width="1024" height="1024"
    image-rendering="optimizeSpeed"
    xlink:href="pixelart.bmp" />

Есть ли какой-нибудь атрибут, который разрешит это?

1 Ответ

5 голосов
/ 04 января 2011

Я думаю, что image-rendering="optimizeSpeed" - самое близкое, что вы можете получить. Поскольку спецификации для этого свойства state, он "должен использовать алгоритм повторной выборки, который достигает цели быстрого рендеринга, с требованием, чтобы алгоритм повторной выборки был по крайней мере таким же хорошим, как и повторная выборка ближайшего соседа. « Поскольку это единственный раздел спецификации, в котором упоминается« ближайший сосед », я не думаю, что у вас есть другие варианты.

Единственное, что я могу найти, это свойство IE9 -ms-interpolation-mode:nearest-neighbor. Это (конечно) специфично для IE и указано в качестве свойства CSS (поэтому, возможно, применимо только к HTML).

Какая ОС / браузер / версия выдает интерполированные пиксели в результате увеличения этого атрибута?

Также обратите внимание, что вы можете использовать комбинацию HTML5 Canvas и SVG для идеального воссоздания вашего изображения с одним SVG <rect> на пиксель:
http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml

...