SVG comme un fond de CSS

J'ai essayé d'obtenir un simple SVG rectangle de travailler comme un arrière-plan dans IE9 ou FF4 et de ne pas travailler pour moi. Voici mon code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div style="height:99px;background-image: url('bar.svg')"></div>
<iframe src="bar.svg" height="99px"></iframe>
</body>
</html>

L'iframe montre le graphique, mais la div n'a pas. Toutes les idées, où j'ai peut-être tort?

J'ai trouvé un exemple de travail ici:
Mais je ne peux pas faire le travail moi-même 🙁
Il a été me rend fou.

Merci pour toute aide.

  • Pouvez-vous code postal ou une démo de cette page dans l'action? Le code semble bien pour moi (mais je préfère ajouter des guillemets url('foo') et changement background à background-image).
  • Malheureusement, je n'ai pas accès à un serveur web. Mais j'ai utilisé ci-dessus css pour les images png et il fonctionne très bien.
  • D'accord avec blender. Je soupçonne que le manque des guillemets autour de l'URL sont qu'est-ce que vous mordre.
  • J'ai modifié le style comme l'a suggéré, mais le résultat est le même.
  • Les guillemets ne sont pas nécessaires pour le url accesseur. Ce site donne un exemple d'utilisation d'une image SVG, comme un fond de CSS: alistapart.com/d/...
  • Pouvez-vous poster un violon jsfiddle.net) afin que nous puissions avoir un coup d'oeil? Le code semble bien pour moi aussi.
  • C'est un bon exemple simple. De ce que j'ai vu jusqu'à présent. Il travaille sur le corps mais pas sur un div ?!? Jamais utilisé jsfiddle.net..je vais essayer.

InformationsquelleAutor user169867 | 2011-03-23
  1. 9

    Merci à tous pour l'aide. C'était en réalité un serveur web de problème où le mauvais type MIME pour le SVG a été servi & que le fait que les navigateurs ne parviennent pas à rendre correctement.

    Voici ce qu'il fixe pour moi.

    1er, j'ai changé de VS 2010 intégré dans le serveur web IIS Express. Ensuite dans mon web config, j'ai ajouté:

    <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    </staticContent>
</system.webServer>

    Maintenant tout fonctionne correctement.

    • Merci! C'est exactement mon problème.
    InformationsquelleAutor user169867
  2. 3

    J'ai eu le même problème dans Joomla! 2.5 en cours d'exécution sur Godaddy serveur Linux.

    Après d'intenses recherches, voici comment j'ai résolu le problème:

    Allez dans le répertoire racine de votre site Joomla installer et de localiser les .htaccess fichier (ou htaccess.txt si elle n'est pas déjà en place)

    Maintenant ajouter ces lignes dans le fichier:

    AddType image/svg+xml svg
AddType image/svg+xml svgz

    Reste, l'utilisation de la norme CSS et HTML propriétés pour afficher votre fichier SVG.

    InformationsquelleAutor Hesen
  3. 1

    Cette jsfiddle pour vous?

    http://jsfiddle.net/B3mnk/embedded/result/

    fwiw, j'ai ajouté un fond de taille pour le rendre de nice 'n grand.

    • Oui, c'est fait. Je commence à penser que le problème est en fait pas avec le code, mais w/ Visual Studio 2010. Je peux tourner les pages en local ou en ligne, mais si j'essaie de les exécuter dans VS seulement l'iframe fonctionne... très étrange.
    • Je crains que je ne sais rien de Visual Studio 2010. Si vous exécutez dans VS, quel navigateur est utilisé? Est-il quelque chose de construit-dans?
    InformationsquelleAutor Matijs