Как предотвратить SVG-пикселизацию в Safari при использовании фильтра - PullRequest
Новая
       37

Как предотвратить SVG-пикселизацию в Safari при использовании фильтра

0 голосов
/ 22 октября 2019

В приведенной ниже демонстрации я вижу в Safari, что при применении стиля

svg { filter: blur(0); /* even with no-op filter */ }

пиксели SVG теряются и масштабируются, это происходит только в Safari, но не в Chrome 

#scene {
   filter: blur(0); /* even with no-op filter */
   transform-origin: 0 0;
   transform: scale(6);
}
<div id="scene">
  hello
</div>

Как я могу предотвратить пикселизацию, сохраняя при этом тень на SVG?

1 Ответ

1 голос
/ 23 октября 2019

Это происходит потому, что Safari оптимизирует масштаб и выполняет преобразование на графическом процессоре. Вы хотите остановить Safari и заставить его повторно выполнить рендеринг на ЦП (это менее энергоэффективно).

Функция, которую вы хотите изменить, скорее всего, эта внутри panzoom.js 

  function applyTransform(transform) {
    svgElement.setAttribute('transform', 'matrix(' +
      transform.scale + ' 0 0 ' +
      transform.scale + ' ' +
      transform.x + ' ' + transform.y + ')')
  }

Вы хотите добавить еще один атрибут здесь, чтобы запустить Safari для повторного рендеринга. Возможно, вам придется поэкспериментировать с добавлением атрибутов, таких как enable-background: new или shape-render: geometryPrecision, чтобы увидеть, что может работать. Примечание. Возможно, вам придется много экспериментировать, и нет никаких гарантий, что все, что работает, будет работать.

...