SVG image de fond d'écran via CSS, pas à l'affiche dans les navigateurs webkit
Je suis un de développeurs open-source et pur HTML5 et CSS3 avec mon webframework (http://m-m-m.sf.net).
Je tiens à attirer une erreur de validation icône via l'entrée:invalide la règle CSS aligné à droite.
Mais c'est seulement en travaillant dans FF, mais pas dans les navigateurs basés sur webkit comme Chrome ou Safari.
J'ai créé un minimum de standanlone html (sans validation et :non valide) pour les essais de:
<!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>
Des idées?
mon SVG n'apparaît pas sur CHROME quand je ne
background:url('loader.svg')
. Ne peut pas comprendre pourquoi il n'affiche pas quand je vois l'actif a été chargé avec succès
OriginalL'auteur Jörg | 2013-05-06
Vous devez vous connecter pour publier un commentaire.
Vous pouvez essayer base64 données codées uri pour svg images d'arrière-plan.
C'est à quoi il ressemblerait dans le CSS:
J'ai changé le
font-family
Sans-serif comme les autres (espacement fixe) de la police a obtenu rendus 2px plus à droite par google Chrome sous Windows, vous pouvez jouer avec un peu. J'ai utilisé cette ligne codeur.Ici est le même svg avec la police à chasse fixe:
et un jsfiddle
Cool. Content d'avoir pu aider. Récemment, j'ai répondu à une question sur base64 données d'image-les uri et les couleurs en MOINS: stackoverflow.com/questions/16076713/... une partie de ce que pourraient être utiles pour vous. BTW: Cela semble être votre première question sur. Si une réponse trouve une solution pour votre question, vous pouvez l'accepter (cochez la case à côté =)).
Salut, je suis en utilisant SVG en Chrome avec l'encoder en base64, mais parfois, je suis confronté à la question de l'ERREUR 414 URI de trop longtemps. Savez-vous d'où il vient et comment le résoudre?
Vous n'avez pas besoin de coder les données URI en base64, vous pouvez également utiliser l'URI de l'encodage (voir JS
encodeURI()
) plus d'encoder le char#
→%23
(pour IE) et le gain d'environ 10% par rapport à base64 Vous pouvez test, si vous voyez un carré vert, SVG arrière-plan fonctionne à l'aide de l'encodage des URIOriginalL'auteur Martin Turjak