Tengo un div simple, con un SVG establecido como imagen de fondo con repetición vertical. En Chrome y Firefox, dependiendo del tamaño de la pantalla, veo una brecha en diferentes tamaños (cambie el tamaño de la ventana).
https://jsfiddle.net/bartadaniel/ejtvy7po/9/
.bg {
width: 50%;
height: 2000px;
display: block;
background-repeat: repeat;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='272' height='171' viewBox='0 0 272 171'> <rect class='cls-1' width='272' height='171' fill='green'/></svg>");
}
<div class="bg"></div>
¿Hay alguna razón para esto?
3 respuestas
Desafortunadamente, la única solución que abordó este problema de manera confiable fue convertir el SVG a un formato basado en píxeles, como JPG. Aparentemente, los navegadores no tienen problemas para escalar píxeles, pero causan efectos secundarios en los bordes al escalar formatos basados en vectores.
Eso sucede debido a una combinación de background-size:contain
y las dimensiones en píxeles de su svg.
Estás viendo que el navegador intenta escalar la imagen para que nada desborde los límites de tu <div>
. Cuando combina esa escala con dimensiones de píxeles de imagen de 171 (no se puede multiplicar uniformemente en 2000px), obtiene líneas que le muestran los subpíxeles que su navegador está tratando de mostrar.
Simplemente elimine el background-size:contain
para resolverlo.
Editar:
En el caso de que necesite contener ancho, existen algunos trucos para ayudarlo a obtener un mejor resultado.
Haga que las dimensiones de la imagen de fondo sean múltiplos de 10. El cuadrado sería mejor con algo como 100x100px, pero también podría ser un rectángulo (trate de acercarse a su ancho objetivo) como 1000x100px.
Establezca
background-size: 100% auto
en lugar decontain
. Esto estirará la imagen proporcionalmente para llenar el ancho del contenedor.Use
background-repeat: repeat-y
para forzar una repetición vertical para que el navegador solo esté haciendo los cálculos en un eje.
Es un problema de representación de subpíxeles. Cada navegador se redondea de manera diferente y la representación de subpíxeles SVG está bastante desordenada.
Le sugiero que edite su contenido SVG para hacerlo un poco más grande que su viewbox.
<svg xmlns='http://www.w3.org/2000/svg' width='272' height='171' viewBox='0 0 272 171'>
<rect class='cls-1' y='-.5' width='272' height='172' fill='green'/>
</svg>
Obviamente, este truco no funciona para todos los SVG de fondo, pero podría ser útil en su caso.
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].