LINUX.ORG.RU

[SVG] Сглаженные линии

 


0

1

У меня получается рисовать вот так (видите зазубрины на окружности): http://upload.wikimedia.org/wikipedia/commons/4/40/Circle_of_latitude_elevati...

Во многих примерах вижу вот так красиво: http://raphaeljs.com/analytics.html

Как нарисовать окружность, чтобы кривая у нее была сглаженная и приятная? Тоже самое касается прямых. Исходники этого Raphael смотрел, в Google искал неспешно в течение года. Ничего. Вижу, что во многих сглаженных примерах толщина линии стоит в 4, но у меня линии тогда становятся очень жирными. В чем секрет?

★★★★★

Последнее исправление: saper (всего исправлений: 1)

Так ставь не 4, а просто больше, чем сейчас, например.

shape-rendering=«geometricPrecision» на <svg> вроде бы тут не помогает…

Deleted
()

> видите зазубрины на окружности

Нет :-\

Ни в вендоопере, ни в вендолисе. Все гладко.

thesis ★★★★★
()

В убунтофоксе тоже гладко.

Nervous ★★★★★
()

Я не вижу зазубрин, довольно гладкие линии на мой взгляд.

UnSavant
()

Ну а вообще по сути уверен, что секрет явно не в формате, а в инструменте отрисовки. Формат ведь просто векторный, это формула описывающая кривизну линий, но уж никак не их гладкость.

UnSavant
()

Гладкая кривулина. Возможно, влияние ШГ-тредов

GateKeeper ★★
()
Ответ на: комментарий от Miguel

Тоже самое, не вижу зазубрин в обоих примерах.

winddos ★★★
()

Тоже подтвержу гладкость, ff 7.0.1. Попробуй, кстати, увеличить — вообще всё красиво, только некоторые надписи под линиями не гуд.

massimus ★★★
()
Ответ на: комментарий от massimus

>некоторые надписи под линиями

Перечитал, сам не понял :)
Надписи линиями перекрываются, вот.

massimus ★★★
()

Ок, я тоже заметил, что от отображалки тоже зависит. Вот пример, который везде плохо отображается:
http://free-sa.sourceforge.net/test/silver.svg

Исходник маленький и простой, в нем же можно поиграть с CSS. Окружность и линии описаны, как соответствующие объекты SVG (всё по учебникам и спецификациям). Проверил в Firefox 7.0.1, Konqueror@Webkit 4.6.00, Opera 11.51: зазубрины есть слева и справа на окружности, а также на линии, которая под углом примерно 5 градусов.

saper ★★★★★
() автор топика

Это всё «оптический обман зрения». Чем тоньше линия, тем выразительней её ступенчатость при сглаживании. Если не охота менять толщину линий, можно попробовать более близкие цвета линии и фона, чтобы уменьшить контраст.

blexey ★★★★★
()
Ответ на: комментарий от blexey

Я понял, что зависит от толщины, но если я поставлю 4, как в примере Raphael, то визуально у меня линии становятся толще!

saper ★★★★★
() автор топика
Ответ на: комментарий от firestarter

А как можно размыть? Желательно попроще (одной командой или одним свойством), чтобы кода было не очень много.

saper ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.