Immagine di sfondo SVG tramite CSS non visualizzata nei browser Webkit

Sono uno sviluppatore open-source e utilizzo puro HTML5 e CSS3 con il mio Webframework (http://m-m-m.sf.net). Desidero disegnare un'icona di errore di convalida tramite input: regola non valida in CSS allineata a destra. Ma funziona solo in FF ma non in browser basati su webkit come Chrome o Safari. Ho creato un html standanlone minima (senza convalida e: non valido) per la prova:Immagine di sfondo SVG tramite CSS non visualizzata nei browser Webkit

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style type="text/css"> 
    <!-- 
input { 
    border-color: #ff2222; 
    background-color: #ff8888; 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em'><g><circle cx ='8' cy ='8' r ='8' style='fill:%23ff0000;stroke:none'/><text x='6' y='13' style='font-size:14px;fill:%23ffffff;stroke:none;font-family:Monospaced;font-weight:bold'>!</text></g></svg>"); 
    background-repeat: no-repeat; 
    /* background-size: auto; */ 
    background-position: 98% 50%; 
} 
    --> 
    </style> 
    </head> 
    <body> 
    <input type="text" placeholder="type here" /> 
    </body> 
</html>

Tutte le idee?

fonte

2013-05-06 Jörg

mia SVG non mostra su Chrome quando faccio solo 'background: url ('loader.svg') '. Non riesco a capire perché non viene mostrato quando riesco a vedere che la risorsa è stata caricata correttamente. – vsync

Si può provare base64 uris dati codificati per immagini di sfondo svg.

questo è come apparirebbe in CSS:

input { 
    border-color: #ff2222; 
    background-color: #ff8888; 
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogU2Fucy1zZXJpZjsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg=="); 
    background-repeat: no-repeat; 
    /* background-size: auto; */ 
    background-position: 98% 50%; 
}

ho cambiato il font-family a sans-serif come l'altro tipo di carattere (Monospaced) ottenuto resa più 2px a destra di Chrome su Windows, si potrebbe giocare con questo un po '. Ho usato questo online encoder.

Qui è lo stesso svg con il font a spaziatura fissa:

background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij48Zz48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgZmlsbD0iI2ZmMDAwMCIgc3Ryb2tlPSJub25lIiAvPjx0ZXh0IHg9IjYiIHk9IjEzIiBzdHlsZT0iZm9udC1zaXplOiAxNHB4OyBmb250LWZhbWlseTogTW9ub3NwYWNlZDsgZm9udC13ZWlnaHQ6IGJvbGQ7IHN0cm9rZTogbm9uZTsgZmlsbDogI2ZmZmZmZjsiPiE8L3RleHQ+PC9nPjwvc3ZnPg==");

e jsfiddle

fonte

2013-05-06 22:34:54

Impressionante. Funziona bene. Molte grazie. BTW: Sto usando meno e tramite semplice svg sono stato in grado di usare variabili per i colori ma la cosa più importante è che funzioni nei browser rilevanti (IE6 e IE7 non hanno rilevanza per me) ... –

Cool. Sono contento di poterti aiutare. Recentemente ho risposto a una domanda sui dati immagine base64-uris e colori in LESS: http://stackoverflow.com/questions/16076713/less-data-uri-painter-mixin/16093998#16093998 una parte di quello potrebbe essere utile per te . BTW: questa sembra essere la tua prima domanda su SO. Se una risposta trova una soluzione per la tua domanda, puoi accettarla (barrare a lato =)). –

Ciao, sto usando SVG in Chrome con la codifica base64, ma a volte sto affrontando il problema ERROR 414 - URI troppo lungo. Sai da dove viene e come risolverlo? – Fab

Immagine di sfondo SVG tramite CSS non visualizzata nei browser Webkit

risposta

Problemi correlati