pixelación SVG en cromo

Esto es muy extraño. Estoy usando imágenes SVG, debido al bajo tamaño del archivo, el procesamiento nítido y la escalabilidad (los objetos se animan bastante). Funciona perfectamente en FF, ie9, Safari e iPad, pero en Chrome ciertas imágenes SVG están rindiendo muy mal.pixelación SVG en cromo

SVG in chrome

SVG in safari

Cualquier idea por qué esto podría estar sucediendo? Los archivos svg son muy pequeños.

Aquí es un poco de una muestra de SVG

http://c975805.r5.cf2.rackcdn.com/rs-grails-r4/passion/social.svg

Fuente

2012-03-05 Fresheyeball

Probablemente debería rellenar un informe en Chrome, y sería más fácil de responder si tuviera un código de ejemplo en la pregunta :) he añadido un –

mejor muestra en vivo. – Fresheyeball

He archivado un informe de error: http://code.google.com/p/chromium/issues/detail?id=119471 Esperando una respuesta ... –

Así que de todos modos, este es un error cromo de fiar. Y hay una solución, hacer que svg sea "más grande", los archivos svg que internamente informan que son demasiado pequeños causan este error.

Fuente

2012-03-17 17:57:24 Fresheyeball

Estimado votante ... ¿por qué votar abajo? – Fresheyeball

¡Algunas personas no pueden manejar la verdad! jaja – XerxesNoble

¿Más grande en qué sentido @Fresheyeball? ¿Tamaño del archivo? O css dimensiones? –

Después de muchas investigaciones, finalmente encontré una solución de trabajo:
exportar el SVG doble de las dimensiones necesarias (por lo tanto, me nombré [email protected])
después en css, añadir transform: scale(0.5)

El resultado en Chrome se verá igual que en Firefox.

Fuente

2015-06-26 12:11:53

Repasando docenas de problemas en StackOverflow y leyendo acerca de esto en todas partes, descubrí que esta era la única solución para engañar a Chrome para que reprodujera correctamente los archivos SVG en el PDF que estoy imprimiendo. Mi situación también fue MUY compleja e involucrada, con múltiples capas de las propiedades 'zoom' y' scale'. – Brian

Me he encontrado con este error también con un elemento con un fondo SVG. La solución fue reducir la opacidad de 0,01, es decir:

.thing { 
    background: url('my-image.svg'); 
    opacity: 0.99; 
}

Fuente

2017-08-28 03:19:05 Koonga

Respuesta

Cuestiones relacionadas