SVG Hintergrundbild via CSS nicht in Webkit Browsern

Ich bin ein Open-Source-Entwickler und gehe für reines HTML5 und CSS3 mit meinem Webframework (http://m-m-m.sf.net). Ich möchte ein Validierungsfehler-Symbol über Eingabe zeichnen: Ungültige Regel in CSS nach rechts ausgerichtet. Aber es funktioniert nur in FF, aber nicht in Webkit-basierten Browsern wie Chrome oder Safari. Ich habe eine minimale standanlone html (ohne Validierung und: ungültig) für die Prüfung:SVG Hintergrundbild via CSS nicht in Webkit Browsern

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

Irgendwelche Ideen?

Quelle

2013-05-06 Jörg

meine SVG zeigt nicht auf CHROME, wenn ich nur tun 'background: url ('loader.svg') '. Kann nicht herausfinden, warum es nicht angezeigt wird, wenn ich sehen kann, dass das Asset erfolgreich geladen wurde – vsync

Sie können versuchen base64 codierte Daten uris für Svg Hintergrundbilder.

Dies ist, wie es in CSS aussehen:

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%; 
}

Ich habe den font-family zu Sans-Serif als der andere (nicht-proportional) Schriftart 2px mehr nach rechts von Chrome unter Windows, könnten Sie spielen konnte gerendert damit ein wenig. Ich benutzte dieses online encoder. Hier

ist die gleiche svg mit der Monospace-Schrift:

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

und ein jsfiddle

Quelle

2013-05-06 22:34:54

Awesome. Funktioniert gut. Danke vielmals. BTW: Ich verwende weniger und über Plain Svg konnte ich Variablen für Farben verwenden, aber das Wichtigste ist, dass es in relevanten Browsern funktioniert (IE6 und IE7 haben keine Relevanz für mich) ... –

Cool. Froh, dass ich helfen konnte. Vor kurzem beantwortete ich eine Frage über base64 Bilddaten-uris und Farben in LESS: http://stackoverflow.com/questions/16076713/less-data-uri-painter-mixin/16093998#16093998 ein Teil davon könnte für Sie nützlich sein . Übrigens: Dies scheint Ihre erste Frage zu SO zu sein. Wenn eine Antwort eine Lösung für Ihre Frage findet, können Sie sie akzeptieren (kreuzen Sie an der Seite =)). –

Hallo, Ich benutze SVG in Chrome mit der Base64-Codierung, aber manchmal bin ich mit dem Problem ERROR 414 - URI zu lange konfrontiert. Weißt du, wo es herkommt und wie man es repariert? – Fab

SVG Hintergrundbild via CSS nicht in Webkit Browsern

Antwort

Verwandte Themen