Las imágenes de fondo tienen espacio entre ellas cuando se utiliza una imagen SVG. ¿Cómo resolver en Chrome?

Cuando uso una imagen SVG como el fondo de mosaico para el cuerpo de mi página, hay un pequeño espacio entre las teselas. Si cambio a la versión PNG del archivo, no sucede.Las imágenes de fondo tienen espacio entre ellas cuando se utiliza una imagen SVG. ¿Cómo resolver en Chrome?

Estoy usando la última versión de Google Chrome para Mac - versión 19.0.1084.56. No he probado Windows porque no tengo esa plataforma. El archivo funciona como se esperaba en Safari y FF.

Después de varias búsquedas en Google y de buscar aquí en SO, no he encontrado ningún informe similar. Quizás alguien aquí tiene una solución.

Aquí está mi código de prueba:

<!DOCTYPE html> 
<html> 
<head> 
<title>SVG background test</title> 
<style type="text/css"> 
body { 
    background-color: #FFF; 
    background-image: url(img/assets/background.svg); 
    background-repeat: repeat; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

Fuente

2012-06-26 Violet

Esto resultó no sólo estar sucediendo que Chrome, pero fue más notable en ese navegador. Como publiqué anteriormente, aquí está la solución: Después de leer una solución para un problema de Chrome/svg ligeramente diferente, descubrí la respuesta. Publicando aquí en caso de que alguien más se encuentre con este problema. Creé mi archivo SVG en Illustrator. Al parecer, mi tamaño de mesa de trabajo/imagen no estaba en píxeles precisos. Descubrí esto abriendo mi archivo SVG en un editor de texto y mirando a la parte superior del archivo que he visto esto:

width="229.9999px" height="147.4256px"

Abrí el archivo SVG en Illustrator y se aseguró de que las dimensiones eran exactamente incluso píxeles, a continuación, doble revisado nuevamente en el archivo de texto. dimensiones corregidas fueron:

width="230px height="148px"

Por alguna razón, simplemente editando los valores en el archivo de texto no funcionó para mí, pero de nuevo, era más rápido que acaba de fijar en Illustrator que encontrar la manera de editar el archivo de texto SVG correctamente . En cualquier caso, ahora no tengo un espacio en mis fichas. Espero que ayude a alguien más si tienen este problema.

Fuente

2012-07-05 23:39:00 Violet

Probablemente un error de redondeo. – Palec

Esto no resuelve mi problema. Tengo un archivo svg con 100 px de ancho y 100 px de alto, pero todavía hay un espacio aquí. Lo interesante es que Firefox parece no tener este problema. –

¡GENIO! GRACIAS – paulslater19

Hay cuatro cosas a tener en cuenta (esta respuesta es para otras personas que terminan aquí en busca de una solución):

asegurándose de que el height y width son enteros aka "sin un componente fraccional" (como se mencionó por Violet, sin decimales)
Ejemplo: height="326.25" vs height="326"
asegurarse de que su viewbox números enteros también se
E jemplo viewBox="0 0 306.25 753" vs viewBox="0 0 306 753"
Y si usted tiene una ventana, también puede establecer el atributo preserveAspectRatio
Learn More On MDN
Otra cosa que prestar atención a es tener la altura y el atributo de ancho establecido en la etiqueta svg. Esto soluciona un problema de tamaño de IE background-size. This is a good article about it.

En mi situación, el SVG repetida correctamente en Chrome, pero tenía una brecha en Firefox hasta que me puse todos mis atributos a números enteros.

Fuente

2016-02-26 18:43:48

No es un problema de ancho o alto. Aparece incluso si su patrón svg es 100px x 100px y no tiene decimal.

puede resolver el problema de poner preserveAspectRatio = "ninguno" en su archivo SVG, ya que: <svg preserveAspectRatio="none" ...>

Pero cuando se quiere repetir un patrón SVG no se puede elegir esta opción debido a que su patrón se distorsiona.

¿Has encontrado la respuesta?

Fuente

2016-10-12 16:46:43 user3101788

Si tiene otra pregunta, por favor, haga clic en el botón [Preguntar] (// stackoverflow.com/questions/ask). –

Las imágenes de fondo tienen espacio entre ellas cuando se utiliza una imagen SVG. ¿Cómo resolver en Chrome?

Respuesta

Cuestiones relacionadas