Отключение сглаживания на svg при применении CSS3: увеличение элемента?

Я обнаружил, что когда CSS3 Zoom применяется на маленьких значках SVG (9 пикселей: 9 пикселей с увеличением: 1,5), значки SVG могут быть размытыми. Любая идея получить острый и чистый значок в этом случае? Заранее спасибо.Отключение сглаживания на svg при применении CSS3: увеличение элемента?

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 
     x="0px" y="0px" width="9px" height="9px" viewBox="0 0 9 9" enable-background="new 0 0 9 9"> 
    <g> 
     <g fill="none" transform="translate(0.5, 0.5)"> 
      <g stroke="#000000" stroke-width="0.5" stroke-linecap="square" > 
       <line x1="2" y1="4" x2="6" y2="4"/> 
       <line x1="4" y1="2" x2="4" y2="6"/> 
      </g> 
      <g stroke="#909090" stroke-width="1" stroke-linecap="square" > 
       <rect x="0" y="0" width="8" height="8"/> 
      </g> 
     </g> 
    </g> 
</svg>

источник

2013-06-03 bigbearzhu

Какой браузер? Некоторые браузеры не пересчитывают SVG при изменении размера или масштабировании. Что такое CSS3 Zoom? Вы имеете в виду просто масштабирование браузера? Или нестандартное свойство IE? –

Спасибо за ваше уведомление о моем вопросе. Вот некоторая информация о [CSS3 Zoom] (http://www.css3.com/css-zoom/). Он широко поддерживается большинством современных браузеров. Я пробую это в Chrome и Safari iOS. – bigbearzhu

Да, это нестандартно. Вероятно, это просто масштабирование отображаемого элемента без пересчета. Вы пытались использовать функцию масштабирования вместо этого? Или, возможно, оригинальная SVG больше и масштабируется при первоначальном отображении? –

есть решение сам. Трюк добавляет:

shape-rendering="crispEdges"

к элементам SVG.

Mozilla MDN От:

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

См. Разницу на jsFilddle.

источник

2013-06-03 23:29:09 bigbearzhu

Кто-нибудь знает поддержку браузера на этом? Кажется, не находит никакой ссылки на него. –

С 2016 года поддержку браузера можно найти здесь http://caniuse.com/#feat=css-crisp-edges – Luciano

Как и кажется многообещающим, поддержка 'crispEdges' в сентябре 2017 года по-прежнему ограничена Firefox и Safari и результат выглядит в Firefox под оптимальным образом больше похожим на «pixelated», чем что-либо еще: https://codepen.io/Volker_E/pen/wrBJYb –

Отключение сглаживания на svg при применении CSS3: увеличение элемента?

ответ

Смежные вопросы