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

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

введите здесь описание изображения

Вот код:

  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, как рисовать эти пути (без пересчета перекрывающихся регионов и создания нового пути)?


javascript svg stroke antialiasing
person ee2Dev    schedule 11.03.2019    source источник
comment
Добавьте shape-rendering: crispEdges; к path.p2   -  person enxaneta    schedule 12.03.2019
comment
Спасибо! Вы можете ответить на этот один вкладыш, и я соглашусь.   -  person ee2Dev    schedule 12.03.2019

Ответы (1)


arrow_upward
3
arrow_downward

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

Цитата МДН:

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>

person enxaneta    schedule 11.03.2019