Сглаживание, веб-SVG и Raphaël.js
Я использую Raphaël.js, чтобы нарисовать некоторые маленькие круги (2-4px радиус), который сделан через SVG на всем браузере кроме IE. Круги не выглядят гладкими мне, таким образом, мой вопрос:
- Там некоторый путь состоит в том, чтобы добавить сглаживание к Raphaël.js?
- Запрет этого, там некоторый способ сгладить объекты SVG?
2 ответа
После дальнейших экспериментов я думаю, что проблема не столько в том, что SVG не был сглажен (действительно, при рисовании линий я обнаружил, что обычно хочу отключить сглаживание, установив shapeRendering в crisp-edges; см. этот выпуск), сколько в том, что я хотел получить даже более гладкие края окружностей, чем обеспечивало сглаживание.
Чтобы добиться этого в Raphaël.js, вы можете установить fill и stroke цвета отдельно. Например, на белом фоне, установив stroke в более светлый цвет, чем fill, можно добиться желаемого эффекта.
Сглаживание выполняется с помощью средства визуализации SVG, поэтому вам нужно будет посмотреть на клиента, который показывает SVG. Проблема, однако, в том, что то, что вы рисуете, слишком мало для хорошего сглаживания. Если у вас есть круг радиусом 2 пикселя, он в основном отображается как ромб, потому что он ближе всего к кругу такого размера. Первый пиксель радиуса используется для сердцевины круга, второй пиксель используется для небольшого округления, но он настолько мал, что выглядит как ромб.
Сглаживание требует дополнительных пикселей для работы, а такие маленькие формы ничего не дают. Если вы не увеличите масштаб изображения, они не будут сглажены.