2011-09-22 13 views
1

Cela semble être un ou pour moi. Je peux les amener à travailler dans l'un ou l'autre, mais pas les deux (tout en fonctionnant bien dans Firefox, peu importe comment je le fais). J'ai beaucoup lu sur le sujet, et à moins qu'il ne soit déjà corrigé par Safari, il semble que svg à plat ne soit pas supporté par et ne soit pas rendu correctement dans Safari quand il a de la transparence et que vous voulez voir d'autres éléments en dessous. La seule solution pour cela est de mettre le svg en ligne dans votre code HTML et ça marche bien. Bien sûr, pour cela, il doit être xhtml qui n'est pas supporté par moins de IE 9.Obtenir des SVG transparents pour travailler dans IE et Safari?

Corrigez-moi si je me trompe sur l'un ou l'autre de ces points, mais j'aime beaucoup utiliser le SVG et la puissance a, encore aujourd'hui, j'ai testé ces problèmes à nouveau avec IE et Safari, en utilisant un seul morceau de données SVG, qui fonctionne en ligne et en externe dans Firefox, et ne fonctionnera pas dans Safari lorsque externe, et bien sûr ne fonctionne pas en xhtml avec IE < = 8.

Je ne vois pas de moyen facile de pirater une solution compte tenu de ce qui précède sans faire deux sites distincts réalisés de manière complètement différente. Évidemment, la meilleure chance semble être d'obtenir des fichiers svg externes pour travailler avec Safari, est-ce que quelqu'un connaît des astuces que je n'ai pas lues? Il ne semble pas y avoir beaucoup de choses sur le sujet.

Vive

+0

Quelle version (s) d'Internet Explorer et Safari vous demandons de soutenir? – Phrogz

Répondre

3

This demo works sur Safari/Chrome/FF/IE9. SVG ne fonctionne pas (intégré ou référencé) dans earlier versions of IE, donc cela ne fonctionnera pas.

En bref:

  • Faites votre document XHTML servi
  • Intégrer SVG directement dans avec l'espace de noms approprié.
<html xmlns="http://www.w3.org/1999/xhtml"><head> 
    <meta http-equiv="content-type" 
     content="application/xhtml+xml; charset=utf-8" /> 
    <title>Transparent SVG</title> 
</head><body> 
    <svg xmlns="http://www.w3.org/2000/svg"> 
    <!-- 
     this SVG will have a transparent background 
     and blend over any content below it. 
    --> 
    </svg> 
</body></html> 
Questions connexes