Рисование сетки с помощью jQuery SVG создает 2px линии вместо 1px

Я знаю, что это не библиотека jQuery SVG, вызывающая эту проблему, но при визуализации горизонтальных или вертикальных линий SVG по интегральным координатам x, y линии имеют ширину 2 пикселя вместо 1px. Вероятно, это связано с сглаживанием. Чтобы зафиксировать их и нарисовать линию шириной 1px, мне нужно настроить координаты, добавив 0.5px.

Есть ли способ получить строки толщиной 1px без необходимости их подстроить?

Ответы

Ответ 1

Способом решения проблемы является применение CSS к строкам:

.thelines{
    shape-rendering:crispEdges
}

Глава спецификации свойств формы.

В основном это отключает сглаживание линий, а прямые, которые не прямые или вертикальные, могут НЕ выглядеть очень красивыми.

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

Ответ 2

Таким образом, вы хотите, чтобы горизонтальные и вертикальные линии с широкими пикселями отображались с четкими, а не с нечеткими краями.

Если все координаты в вашем SVG являются целыми числами, возможно, вы можете компенсировать все изображение на 0,5, используя элемент преобразования:

// first group has no transform 
// lines appear blurred, because they are centered on boundary of two pixels
<g id = "blurred">  
    <line x1="10" y1="10" x2="110" y2="10" stroke="black" stroke-width="1"/>
    <line x1="10" y1="10" x2="10" y2="100" stroke="black" stroke-width="1"/>
</g>

    // second group has half pixel transform - 
    // lines will appear sharp because they are translated to a pixel centre
    <g id="sharp" transform="translate(0.5,0.5)">
    <line x1="120" y1="10" x2="220" y2="10" stroke="black" stroke-width="1"/>
    <line x1="120" y1="10" x2="120" y2="100" stroke="black" stroke-width="1"/>
</g>

svg renders like this

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

Итак, если эта идея не может быть использована для решения вашей проблемы, вам, вероятно, понадобится техника "пиксельной привязки". Это проанализировало бы линию перед ее рисованием. Если линия вертикальная или горизонтальная (после преобразования), вам необходимо настроить координаты так, чтобы они оказались в центре пикселя после преобразования.

Вам может быть интересно посмотреть описание WPF Pixel Snapping для справочной информации об этой общей проблеме.

Ответ 3

Просто используйте прямоугольник шириной 1px с заливом (конечно, только для горизонтальных/вертикальных линий).

например. для горизонтальной линии полной ширины:

<rect x="0" y="0" width="100%" height="1" fill="#c2c2c2"></rect>

Идеальные 1px широкие линии каждый раз.