Почему линии / пути SVG друг над другом создают разные штрихи? - PullRequest
Новая
       39

Почему линии / пути SVG друг над другом создают разные штрихи?

2 голосов
/ 12 марта 2019

Я рисую несколько путей с одним и тем же штрихом с некоторым значительным перекрытием (динамическое создание и обновление дерева). В перекрывающихся областях штрих выглядит иначе (темнее и толще - см. A), чем в непересекающихся областях (см. B). Тот же эффект заметен и для разных цветов обводки.

enter image description here

Вот код: 

  path.p2 {
    fill: none;
    stroke: black;
    stroke-width: 1px;
  }
<svg height="500" width="400">
  <path class="p2" d="M210 10 V 100 H 300 "/>
  <path class="p2" d="M210 10 V 120 H 300 "/>
  <path class="p2" d="M210 10 V 140 H 300 "/>
  <path class="p2" d="M210 10 V 160 H 300 "/>
</svg>

Существует ли простое исправление CSS, SVG или javascript, как рисовать эти пути (без пересчета перекрывающихся областей и создания нового пути)?

1 Ответ

2 голосов
/ 12 марта 2019

Как я уже говорил, вы можете добавить shape-rendering: crispEdges к path.p2

MDN Цитата:

crispEdges Указывает, что пользовательский агент должен попытаться подчеркнуть контраст между чистыми краями иллюстрации над скоростью рендеринга и геометрической точностью. Чтобы добиться четких краев, пользовательский агент может отключить сглаживание для всех линий и кривых или, возможно, только для прямых линий, близких к вертикальным или горизонтальным. Кроме того, пользовательский агент может регулировать положение линий и ширину линий, чтобы выровнять края по пикселям устройства. 

svg {
  outline:1px solid;
}
  path.p2 {
    fill: none;
    stroke: black;
    stroke-width: 1px;
    shape-rendering: crispEdges;
  }
<svg height="500" width="400">
  <path class="p2" d="M210 10 V 100 H 300 "/>
  <path class="p2" d="M210 10 V 120 H 300 "/>
  <path class="p2" d="M210 10 V 140 H 300 "/>
  <path class="p2" d="M210 10 V 160 H 300 "/>
</svg>
...