Предотвратить субпиксельный рендеринг с SVG - PullRequest
Новая
       73

Предотвратить субпиксельный рендеринг с SVG

12 голосов
/ 27 мая 2019

Я сейчас работаю с SVG и зашел в тупик.

У SVG есть линии, которые должны масштабироваться вместе с масштабированием (чтобы они оставались в балансе: 100% ширина 10px -> 10% ширина 1px, например)

я масштабирую все stroke-widths с этим кодом: 

var svgPath = this._svgContainer.find('svg [class*="style"]');
for (var i = 0; i < svgPath.length; ++i) {
  var newStrokeWidth = this._oldStrokeWidth[i] * (1 / (width / imgData.w));

  $(svgPath[i]).css(
    'stroke-width', newStrokeWidth
  );
}

Где width - новая ширина после увеличения, а imgData.w - исходная немасштабированная ширина.

Проблема в том, если я увеличиваю масштабдалеко.Штрих с становится небольшим и приводит к субпиксельной визуализации.И предположительно черные линии становятся серыми.

Моя идея заключалась в том, чтобы обрезать значение в определенной точке, чтобы предотвратить его.Но, насколько я знаю, я тоже должен учитывать соотношение пикселей устройства, потому что разные экраны (рабочий стол, мобильный, 4K)

Было бы неплохо, если бы кто-нибудь мог помочь мне с идеей, чтобы решить мою проблему

...