크기가 조정 된 SVG를 사용할 때 어떻게 흐릿함을 수정합니까?

-1

<svg viewBox="0 0 1024 1024"> 
    <path d="M624 96h16l192 224v576.295c0 34.963-28.617 63.705-63.918 63.705h-480.165c-35.408 0-63.918-28.759-63.918-64.235v-735.531c0-35.488 28.693-64.235 64.088-64.235h335.912zM608 128h-320.142c-17.595 0-31.858 14.568-31.858 31.855v736.291c0 17.593 14.551 31.855 31.999 31.855h480.003c17.672 0 31.999-14.238 31.999-31.789v-544.211h-128.067c-35.309 0-63.933-28.37-63.933-64.189v-159.811zM640 144v143.719c0 17.828 14.421 32.281 31.896 32.281h118.503l-150.398-176zM320 320v32h224v-32h-224zM320 224v32h224v-32h-224zM320 416v32h416v-32h-416zM320 512v32h416v-32h-416zM320 608v32h416v-32h-416zM320 704v32h416v-32h-416zM320 800v32h416v-32h-416z" /> 
</svg>

CSS

svg { width:20px; height:20px; }

출력 1 (파이어 폭스 57.0.2)

firefox

출력 2 (63.0 크롬)

firefox

위와 같이 이미지를 확대하면 이미지가 흐리게 보입니다. (https://jsfiddle.net/wutx56co/)

해결책을 알고 있다면 답하고 싶습니다. 감사. 적용

출처

2017-12-27 left click

. 디자인은 32 단위 격자를 사용하므로 각 선은 20 * 32/1024 픽셀의 배수이며 정수가 아닙니다 (0.625). 똑같은 디자인을 유지하려면 일반 1x 해상도 화면의 경우 크기를 32px로 늘려야합니다. 그렇지 않으면 다른 그리드로 다시 디자인해야합니다 (아마 디자인의 라인 수를 변경하는 것을 의미 할 것입니다). – jcaron

@jcaron 나는 영어를 잘 못한다.하지만 나는 조금 알고있다. 오른쪽 픽셀에 배치하기 위해 화면에 대해 더 자세히 알아야 할 필요가있는 것 같습니다. 감사. –

시도이

svg { 
    -webkit-backface-visibility: hidden; 
    -webkit-transform: translateZ(0) scale(1.0, 1.0); 
    transform: translateZ(0);

}

그것은 나에게이 흐릿의 유일한 이유는 화면이 낮은 해상도이고 디자인은 화면의 픽셀 격자에 정렬되지 않기 때문이다 보인다

출처

2017-12-27 10:06:25 Pusku

크기가 조정 된 SVG를 사용할 때 어떻게 흐릿함을 수정합니까?

답변

관련 문제