Le tessere dell'immagine di sfondo presentano spazi vuoti tra di esse quando si utilizza l'immagine SVG. Come risolvere in Chrome?

Quando utilizzo un'immagine SVG come sfondo piastrellato per il corpo della pagina, c'è un leggero spazio tra le tessere. Se passo alla versione PNG del file, non succede.Le tessere dell'immagine di sfondo presentano spazi vuoti tra di esse quando si utilizza l'immagine SVG. Come risolvere in Chrome?

Sto utilizzando l'ultima versione di Google Chrome per Mac - versione 19.0.1084.56. Non ho testato Windows perché non ho quella piattaforma. Il file funziona come previsto in Safari e FF.

Dopo un po 'di ricerche su Google e cercando qui su SO non ho trovato nessun rapporto simile. Forse qualcuno qui ha una soluzione.

Ecco il mio codice di prova:

<!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>

fonte

2012-06-26 Violet

questo si è rivelato non solo accadere che Chrome, ma è stato più evidente in quel browser. Come ho postato sopra, ecco la soluzione: Dopo aver letto una soluzione per un problema di Chrome/svg leggermente diverso ho capito la risposta. Pubblicazione qui nel caso in cui qualcun altro incontri questo problema. Ho creato il mio file SVG in Illustrator. Apparentemente la mia dimensione della tavola da disegno/dell'immagine non era in pixel precisi. Ho scoperto questo aprendo il mio file SVG in un editor di testo e guardando la parte superiore del file ho visto questo:

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

ho aperto il file in formato SVG in illustratore e fatto in modo che le dimensioni erano esattamente anche i pixel, quindi ricontrollato nel file di testo. dimensioni corrette erano:

width="230px height="148px"

Per qualche ragione semplicemente modificando i valori nel file di testo non ha funzionato per me, ma poi di nuovo è stato più veloce di risolvere solo in Illustrator di capire come modificare il file in formato SVG di testo in modo corretto . Ad ogni modo, ora non ho un buco nelle mie tessere. Spero che aiuti qualcun altro se sta avendo questo problema.

fonte

2012-07-05 23:39:00 Violet

Probabilmente un errore di arrotondamento. – Palec

Questo non risolve il mio problema. Ho un file SVG con larghezza 100px e altezza 100px, ma qui c'è ancora un buco. La cosa interessante è che Firefox sembra non avere questo problema. –

YOU GENIUS! GRAZIE – paulslater19

Ci sono quattro cose da cercare (questa risposta è per le altre persone che finiscono qui alla ricerca di una soluzione):

assicurandosi che il height e width sono numeri interi alias "senza una componente frazionaria" (come detto da Violet, senza decimali)
Esempio: height="326.25" vs height="326"
Rendere sicuro il vostro viewbox è anche interi
E xample viewBox="0 0 306.25 753" vs viewBox="0 0 306 753"
E se si dispone di una finestra, si può anche impostare l'attributo preserveAspectRatio
Learn More On MDN
Un'altra cosa da prestare attenzione è avere l'altezza e l'attributo width impostato nel tag svg. Questo risolve un problema di dimensionamento di IE background-size. This is a good article about it.

Nella mia situazione, lo SVG ripetuto correttamente in Chrome, ma aveva un gap in Firefox fino a quando ho impostato tutti i miei attributi numeri interi.

fonte

2016-02-26 18:43:48

Non è un problema di larghezza o altezza. Appare anche se il tuo modello svg è 100px x 100px e non ha decimali.

è possibile risolvere il problema mettendo preserveAspectRatio = "none" nel file SVG come: <svg preserveAspectRatio="none" ...>

Ma quando si desidera ripetere un modello SVG non si può scegliere questa opzione perché il vostro modello sarà distorta.

Hai trovato la risposta?

fonte

2016-10-12 16:46:43 user3101788

Se hai un'altra domanda, per favore chiedi facendo clic sul pulsante [Chiedi domanda] (// stackoverflow.com/questions/ask). –

Le tessere dell'immagine di sfondo presentano spazi vuoti tra di esse quando si utilizza l'immagine SVG. Come risolvere in Chrome?

risposta

Problemi correlati