Spazio vuoto tra ripetizioni sfondo SVG

Non riesco a liberarmi di questo spazio bianco tra le ripetizioni di elementi SVG (come sfondi CSS) esportate da Illustrator CS5.Spazio vuoto tra ripetizioni sfondo SVG

Sto usando un semplice CSS background-image e background-repeat: repeat-x ma c'è sempre questo spazio bianco tra ogni ripetizione. Non sto usando lo background-size affatto.

Ecco quello che sto vedendo (testato su Safari/Chrome):

white space

Aggiungere se apro lo SVG per verificare eventuali spazi bianchi sul lato, non c'è nulla (vedi finestra sul a destra) e va tutto il senso al lato della finestra:

no white space on separate window

ho provato salvare l'immagine in Illustrator per File -> Scripts -> SaveDocsAsSVG e Save as.. -> SVG.

Non so cos'altro provare a questo punto. Qualche idea?

EDIT: Invio del codice ..

<body> 
    <div class="outer"> 
     <div class="inner"> 
     </div> 
    </div> 
</body>

E il CSS di base:

.outer { 
    background-color: #7fcefb; 
    height: 700px; 
    background-image: url('/wp-content/themes/grizzly/assets/img/trees.png'); 
    background-position: center 95%; 
    background-repeat: repeat-x; 
} 

.inner { 
    background-image: url('/wp-content/themes/grizzly/assets/svg/treeshill.svg'); 
    height: 700px; 
    background-position: center bottom; 
    background-repeat: repeat-x; 
}

fonte

2015-02-10 roflmyeggo

potete inserire il vostro codice o un link? Sembra che qualcosa potrebbe avere un leggero margine o imbottitura su di esso. – user3781632

puoi pubblicare il link all'immagine? –

Aggiunti alcuni HTML e CSS di base per mostrare la configurazione. Download SVG - http://s000.tinyupload.com/?file_id=02705325478483063668 – roflmyeggo

Se è quello che penso che sia, apro il file SVG e cambiare l'elemento radice <svg> così che include il seguente attributo:

<svg ... preserveAspectRatio="none">

Se ha già un preserveAspectRatio attributo, basta cambiarlo in "none" e ricaricare.

fonte

2015-02-10 01:45:04

Paul - tu sei l'uomo! Grazie! Questo deve essere aggiunto perché i browser modificano automaticamente le proporzioni? – roflmyeggo

Sarà perché c'è una leggera differenza tra le proporzioni degli attributi 'width' /' height' e i valori width & height nell'attributo 'viewBox'. –

Ah, ha senso! Grazie ancora. Saluti. – roflmyeggo

preserveAspectRatio="none" non ha funzionato per me perché rende lo svg prendere l'intera larghezza del suo contenitore genitore.

Invece un prendere i parametri: preserveAspectRatio="xMinYMax meet" che in cambio ho potuto utilizzare con background-repeat: repeat-x;

Per maggiori informazioni ecco un articolo eccellente: A Look At preserveAspectRatio in SVG

fonte

2015-11-20 19:47:50

Con 'preserveAspectRatio =" xMinYMax meet "' Vedo ancora lacune. Anche se 'preserveAspectRatio =" xMinYMax slice "' funziona per me. – borisdiakur

Spazio vuoto tra ripetizioni sfondo SVG

risposta

Problemi correlati