Я знаю, что это не библиотека jQuery SVG, вызывающая эту проблему, но при визуализации горизонтальных или вертикальных линий SVG по интегральным координатам x, y линии имеют ширину 2 пикселя вместо 1px. Вероятно, это связано с сглаживанием. Чтобы зафиксировать их и нарисовать линию шириной 1px, мне нужно настроить координаты, добавив 0.5px.
Есть ли способ получить строки толщиной 1px без необходимости их подстроить?
Способом решения проблемы является применение CSS к строкам:
.thelines{
shape-rendering:crispEdges
}
Глава спецификации свойств формы.
В основном это отключает сглаживание линий, а прямые, которые не прямые или вертикальные, могут НЕ выглядеть очень красивыми.
Но, вероятно, вам лучше придерживаться добавления .5 к координатам линий, потому что браузеры делают то, что им говорят: линия находится на точных координатах, и штрих окрашивается с обеих сторон линии, половина пикселей здесь и половина пикселей там.
Таким образом, вы хотите, чтобы горизонтальные и вертикальные линии с широкими пикселями отображались с четкими, а не с нечеткими краями.
Если все координаты в вашем 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>
Но это не будет работать для горизонтальных/вертикальных линий, которые не определяются целыми координатами, или где другое преобразование перемещает их от целых координат.
Итак, если эта идея не может быть использована для решения вашей проблемы, вам, вероятно, понадобится техника "пиксельной привязки". Это проанализировало бы линию перед ее рисованием. Если линия вертикальная или горизонтальная (после преобразования), вам необходимо настроить координаты так, чтобы они оказались в центре пикселя после преобразования.
Вам может быть интересно посмотреть описание WPF Pixel Snapping для справочной информации об этой общей проблеме.
Просто используйте прямоугольник шириной 1px с заливом (конечно, только для горизонтальных/вертикальных линий).
например. для горизонтальной линии полной ширины:
<rect x="0" y="0" width="100%" height="1" fill="#c2c2c2"></rect>
Идеальные 1px широкие линии каждый раз.