Wyłącz anty-aliasing na svg podczas stosowania CSS3: Powiększenie elementu?

Znalazłem, że gdy Zoom CSS3 zostanie zastosowany na małych ikonach SVG (9px: 9px przy powiększeniu: 1,5), ikony SVG mogą być rozmyte. Masz pomysł, aby w tym przypadku uzyskać ostrą i czystą ikonę? Z góry dziękuję.Wyłącz anty-aliasing na svg podczas stosowania CSS3: Powiększenie elementu?

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>

Źródło

2013-06-03 bigbearzhu

Którą przeglądarkę? Niektóre przeglądarki nie przeliczają SVG podczas zmiany rozmiaru lub powiększania. Czym jest Zoom CSS3? Czy chodzi ci o powiększanie przeglądarki? Lub niestandardowej własności IE? –

Dzięki za zawiadomienie o moim pytaniu. Oto kilka informacji na temat [CSS3 Zoom] (http://www.css3.com/css-zoom/). Jest szeroko obsługiwany przez większość nowoczesnych przeglądarek. Próbuję tego w Chrome i Safari na iOS. – bigbearzhu

Tak, jest to niestandardowe. Najprawdopodobniej wystarczy powiększyć renderowany element bez ponownego przeliczania. Czy próbowałeś użyć funkcji przekształcania skali? Czy może oryginalny SVG większy i zmniejszający się przy początkowym wyświetlaniu? –

Got rozwiązanie siebie. Sztuczka polega na dodaniu:

shape-rendering="crispEdges"

do elementów SVG.

Od Mozilla MDN:

crispEdges Wskazuje, że aplikacja kliencka będzie próbował podkreślić kontrast między czystych krawędziach grafiką ponad prędkość renderowania i geometryczną precyzją. Aby uzyskać ostre krawędzie, użytkownik może wyłączyć wygładzanie dla wszystkich linii i krzywych, ewentualnie tylko dla linii prostych zbliżonych do pionowych lub poziomych. Ponadto agent użytkownika może dostosowywać pozycje linii i szerokości linii, aby wyrównać krawędzie z pikselami urządzenia.

Zobacz różnicę na jsFilddle.

Źródło

2013-06-03 23:29:09 bigbearzhu

Ktoś zna obsługę przeglądarki w tej sprawie? Nie można znaleźć żadnego odniesienia do niego. –

Począwszy od 2016 roku obsługa przeglądarek znajduje się pod adresem http://caniuse.com/#feat=css-crisp-edges – Luciano

Jak obiecuje, wsparcie dla 'crispEdges' we wrześniu 2017 jest nadal ograniczone do Firefoksa i Safari a wynik wygląda w Firefoksie podoptymalnie bardziej jak "piksele" niż cokolwiek innego: https://codepen.io/Volker_E/pen/wrBJYb –

Wyłącz anty-aliasing na svg podczas stosowania CSS3: Powiększenie elementu?

Odpowiedz

Powiązane problemy