Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   SVG rect - размытый бордер (https://javascript.ru/forum/dom-window/8940-svg-rect-razmytyjj-border.html)

bdiang 21.04.2010 15:26

SVG rect - размытый бордер
 
Сейчас делаю блоки с закругленными краями с помощью svg и vml, заметил, что в варианте svg бордер у rect несколько размытый, а у vml roundrect - четкий.

В чем причина такого поведения и что с этим делать?

<rect x="0" y="0" width="648px" height="398px" fill="#fff" stroke="#dadada" stroke-width="1px" rx="14px" ry="14px"/>

subzey 21.04.2010 21:34

Сместите координаты на полпикселя, а то сейчас середина линии попает на сетку между пикселями.

bdiang 22.04.2010 08:06

Спасибо, помогло. А не подскажите, откуда эти "полпикселя" взялись? И что такое сетка? Это что-то из векторной графике? Буду признателен объяснению или ссылкам где почитать.

subzey 22.04.2010 09:47

bdiang,
да нет, никаких специфичных терминов. Просто векторную линию толщиной 1 пиксель надо отобразить при помощи пикселей. Но что делать, если середина линии попадает ровно между пикселями? Нарисовать её на обоих пикселях, но в половину яркости.

Это упрощенная модель, но как-то так. Ключевые слова для поиска: Растеризация, Субпиксельный рендер.

bdiang 22.04.2010 09:54

А в случае ширины и высоты в процентах, получается нет гарантии, что при изменении абсолютных ширины и высоты линия не попадет между пикселями?

subzey 22.04.2010 10:03

Угук. Так и есть.


Часовой пояс GMT +3, время: 15:57.