1. Zuhause
  2. Frage und Antwort
  3. Wie behebe ich die Unschärfe bei Verwendung von SVG skaliert?

Wie behebe ich die Unschärfe bei Verwendung von SVG skaliert?

2017-12-27 7 views
-1

HTMLWie behebe ich die Unschärfe bei Verwendung von SVG skaliert?

<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; }

Ausgang 1 (Firefox 57.0.2)

firefox

Ausgang 2 (Chrom 63,0)

firefox

Wenn Sie das Bild wie oben gezeigt skalieren, sieht es verschwommen aus. (https://jsfiddle.net/wutx56co/)

Wenn Sie die Lösung kennen, würde ich gerne antworten. Vielen Dank.

Quelle

2017-12-27 left click

+0

Es scheint mir der einzige Grund, die Anwendung es verschwommen ist, weil Ihr Bildschirm mit niedriger Auflösung ist und das Design richten sich nicht mit Pixelraster Ihren Bildschirm. Das Design verwendet ein 32-Einheiten-Raster, so dass jede Zeile ein Vielfaches von 20 * 32/1024 Pixeln ist, was keine ganze Zahl (0,625) ist. Wenn Sie das exakt gleiche Design beibehalten möchten, müssen Sie die Größe auf 32 px für einen normalen Bildschirm mit 1 x Auflösung erhöhen. Andernfalls müssen Sie mit einem anderen Raster neu entwerfen (bedeutet wahrscheinlich, die Anzahl der Zeilen im Design zu ändern). – jcaron

+0

@jcaron Ich bin nicht gut in Englisch sehr gut, aber ich weiß ein bisschen. Es scheint, dass ich mehr über den Bildschirm lernen muss, um ihn in einem richtigen Pixel zu platzieren. Vielen Dank. –

Antwort

0

versuchen diese

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

}

Quelle

2017-12-27 10:06:25 Pusku

Verwandte Themen

 Verwandte Themen