Почему ширина штриха SVG: 1 делает линии прозрачными?

Я создаю биржевые диаграммы с svg, и у меня возникает проблема, когда я устанавливаю ширину штриха для своих элементов пути в 1. Вместо того, чтобы сделать линии более узкими, она просто делает их того же размера, ширина: 2, но слегка прозрачная. Я не могу опубликовать изображение, хотя, поскольку у меня недостаточно очков репутации...

Мой svg-тэг выглядит так:

<div style="height:300px; width:400px; overflow:hidden">
<svg style="position:relative" height="10000" width="10000" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>

И я добавляю элементы пути динамически с помощью javascript/jquery:

var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
$(shape).attr({"d":"...",
               "fill":"none",
               "stroke":color,
               "stroke-width":"1"});
$("svg").append(shape);

Я потерял значение для атрибута path d, поскольку он был длинным. Кроме того, color - это строковая переменная, которая определяется вручную как "зеленый", "красный" или "черный".

Что-то не так в моем коде, что вызывает это, или это другая проблема?

Ответы

Ответ 1

Это, вероятно, связано с сглаживанием, применяемым в большинстве реализаций SVG. Когда ширина линии приближается или ниже 1, сглаживание делает ее так, что полузакрытые пиксели оказываются частично непрозрачными. При наличии преобразований по умолчанию и области просмотра ваша однопиксельная линия, вероятно, находится точно на границе между двумя физическими пикселями, поэтому каждая из них покрыта половиной, что обеспечивает общую прозрачность на 50%. С черной линией на белом фоне это дает 50% серый цвет.

Ответ 2

Если линии прямые горизонтальные или вертикальные, просто поместите линии на половину пикселя, например x="1.5px".

Другой способ - применить CSS к строкам:

.thelines{
    shape-rendering:crispEdges
}

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

Ответ 3

возможно, немного поздно, но настоящая причина этого заключается в том, что, когда вы рисуете линию сетки, которая бесконечна маленькая, линия с шириной штриха 1 отображается в виде полупикселя влево и вправо (или выше/ниже) от линии сетки. Я решил это, добавив группу вокруг всех объектов с преобразованием 0,5,0,5, поэтому все сдвинуто на половину линии сетки.

Итак, все, что вы рисуете, теперь находится ровно посередине между двумя сетками. Линия с шириной хода 1 wil имеет теперь половину пикселя влево и половину пикселя влево, но как с середины. Результирующее значение в строке с нужной толщиной: 1 пиксель...

Пример:

<g transform="translate(0.5,0.5)">
 <g>
   <path />
   <path />
 </g>
 <g>
   <path />
   <path />
 </g>
</g>

Ответ 4

Ответ user616586 кажется прекрасным.

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

Другая опция:

  • используйте ширину штриха 2px (с отображением 1px снаружи и 1px, отображаемым внутри формы).
  • применить форму к себе как к клику (удаляет визуализацию внешнего 1px)

Ответ 5

Если его D3js затем попробуйте добавить ниже атрибут стиля к вашему элементу d3:

.style('shape-rendering','crispEdges')

Это делает линию более тонкой.

Если вы хотите достичь этого с помощью CSS, добавьте стиль ниже:

.the_Line_CLass{
  shape-rendering: crispEdges;
}