Границы размытого пути в IE & Edge, когда SVG предшествует элемент, размер которого не указан в пикселях - PullRequest
Новая
       83

Границы размытого пути в IE & Edge, когда SVG предшествует элемент, размер которого не указан в пикселях

2 голосов
/ 19 февраля 2020

Я пытаюсь нарисовать острый прямоугольник, используя SVG <path>.

У меня проблема с тем, что верхний и нижний края фигуры имеют неожиданное сглаживание при визуализации в IE и Edge. Проблема возникает, только если элементу <path> предшествует другой элемент, размеры которого выражены в единицах, отличных от px.

Проблема не отображается для элементов <div> или SVG <rect>. Похоже, что только SVG <path> затронут.

Я ценю любую помощь, как мне сделать рендеринг <path> четким без изменения окружающих <div> s?

Я могу смоделировать та же проблема с простым SVG-объектом и:

Следующий скриншот показывает проблему. Chrome слева, Edge справа. При увеличении можно увидеть размытые границы, выделенные стрелками.

enter image description here enter image description here

#div1 {
  font-size: 1.2rem;
  margin-bottom: 20px;
}
<div id="div1">REM font size</div>

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 0 0 L 300 0 L 300 100 L 0 100" />
</svg>

1 Ответ

0 голосов
/ 20 февраля 2020

Проблема связана с тем, что svg находится в координатах, таких как 31.2 (не совсем на линии пикселей) Я также нашел аналогичную тему . В соответствии с принятым ответом вы должны спроектировать SVG так, чтобы его фигуры находились на границах пикселей (особенно на горизонтальной и вертикальной частях фигур).

Каждый раз, когда ваша фигура проходит через середину пикселей, вы получите серые пиксели из-за сглаживания, который используют 2D-рендереры.

Я думаю, что это не так целочисленное значение 1.2rem, которое приводит к тому, что координаты svg не находятся на линии пикселей. Я пытаюсь с целочисленным значением, и проблема исчезла в IE и Edge: 

#div1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

#div2 {
  width: 300px;
  height: 100px;
  background: black;
  margin-bottom: 20px;
}
<div id="div1">REM font size</div>

<div id="div2"></div>
<svg xmlns="http://www.w3.org/2000/svg">
   <path d="M 0 0 L 300 0 L 300 100 L 0 100" />
</svg>
...