Сглаживание, веб-SVG и Raphaël.js

Question

Я использую Raphaël.js для рисования небольших кружков (радиус 2-4 пикселя), что делается через SVG во всех браузерах, кроме IE.Круги не кажутся мне гладкими, поэтому мой вопрос:

1. Есть ли способ добавить сглаживание в Raphaël.js?
2. Если нет, есть ли способсглаживание объектов SVG?

Answer 1

Я наткнулся на этот пост, ища ответ тоже.После попытки установить обводку на более светлый цвет, я обнаружил, что он просто делает его размытым.

Однако, если вы установите обводку на «нет», как показано ниже, это сильно изменит плавностькрая.

    var circle = paper.circle(50, 40, 20);
    circle.attr("fill", "#F00");
    circle.attr("stroke", "none");

Answer 2

В дальнейших экспериментах, я думаю, проблема не столько в том, что SVG не был сглажен (действительно, я обнаружил, что при рисовании линий я обычно хотел отключить сглаживание, установив shapeRendering в crisp-edges; см. эта проблема ), так как я хотел, чтобы на моих кругах были еще более плавные края, чем при сглаживании.

Чтобы добиться этого в Raphaël.js, вы можете установить цвета fill и stroke отдельно.Например, на белом фоне установка stroke на более светлый цвет, чем fill, обеспечивает желаемый эффект.

Answer 3

Я проверял это только в Safari 6, но добавление сглаженного штриха того же цвета, похоже, помогло:

<polygon fill='blue' stroke='blue' stroke-width='3' stroke-antialiasing='true' … >

Answer 4

Сглаживание выполняется с помощью средства визуализации SVG, поэтому вам нужно посмотреть на клиент, который показывает SVG.Проблема, однако, в том, что то, что вы рисуете, слишком мало, чтобы хорошо сглаживаться.Если у вас есть круг с радиусом 2 пикселя, он в основном отображается как ромб, потому что это самый близкий к кругу такой размер.Первый пиксель радиуса используется для ядра круга, второй пиксель используется для небольшого округления, но он настолько мал, что выглядит как ромб.

Для сглаживания требуются дополнительные пикселиработать с такими маленькими формами не очень много.Если вы не масштабируете свои изображения, они не сглаживаются.