Comment faire un motif de "fixe" dans Raphael.js / c'est à dire?

Question

Je me suis créer un petit outil pour illustrer les avantages de polarisation des verres. Fondamentalement, un utilisateur de glisser les verres (un Raphael.js chemin d'accès) sur une scène éblouissante (le fond de CSS de la DIV conteneur) et de "voir à travers" les lentilles. Voici le code js:

var rsr = Raphael("playmask", 720,540);
// Lens path
var path_f = rsr.path("M0,73.293c0.024-39.605,17.289-53.697,35.302-61.34C53.315,4.312,99.052-0.012,119.011,0 c38.56,0.021,43.239,11.164,43.229,29.9c-0.002,3.45-0.76,28.632-16.349,58.949c-10.332,20.092-28.434,60.424-76.452,60.396 C29.821,149.223-0.022,112.898,0,73.293 M200.594,29.922c0.011-18.734,4.699-29.871,43.262-29.851 c19.96,0.013,65.691,4.39,83.695,12.052c18.005,7.662,35.254,21.772,35.231,61.379c-0.023,39.606-29.909,75.896-69.526,75.872 c-48.02-0.027-66.076-40.377-76.384-60.484C201.32,58.557,200.594,33.373,200.594,29.922");

path_f.attr({"stroke-width":2, fill:'url(img/polarized.jpg)'} );

var move = function(dx,dy){
    this.translate( dx-this.ox, dy-this.oy );
    this.ox = dx;
    this.oy = dy;
},
start = function(){
    this.ox = 0;
    this.oy = 0;
},
end = function(){   
};

path_f.drag(move,start,end);

L' #playmask div a cette CSS (juste le "non-polarisée" image d'arrière-plan et la taille):

#playmask{
    height:540px;
    width:720px;
    background: url(img/unpolarized.jpg);
}

Ce que je suis coincé avec est:

• Chrome/Firefox, comme toujours, jouer nice: les lentilles en forme de montre, et le remplissage de l'image semble "fixe" tout en faisant glisser les objectifs (voir la première photo);
• Les versions IE 7,8,9 travail, mais (surprise!) ils ne se comportent pas de la même manière: le fond de l'image est "collé" à la forme de la lentille (voir le deuxième joint pic).

Ce que je pose la question ici est: puis-je faire IE9/8/7 comporter de la même manière, c'est, en conservant le fond de l'image fixe tout en faisant glisser les lentilles? Si oui, comment?

Firefox capture d'écran:

IE9 capture d'écran:

Modifier à l'Aide de Modernizr pour détecter les fonctionnalités du navigateur, j'ai remarqué que cet étrange comportement semblent être liées à la "non-smil" d'IE. J'ai découvert un comportement bizarre de IE9... le fond ne pas "coller", mais si je fais glisser le masque autour, sélectionnez le texte et appuyez sur le bouton droit de la souris, il rafraîchit la "polarisée" arrière-plan à la position correcte!!

Edit 2 (21 Mai 2012) Pas de solution pour le moment :( mais pour être plus précis, elle n'est pas liée de quelque façon à la "non-smil" caractéristique; et, la bonne façon de reproduire le bug sur IE9 est de glisser le verre autour de, sélectionnez du texte dans le reste de la page, et rouler sur l'icône de raccourci qui s'affiche (le bleu avec une flèche). Les lunettes de bg comme par magie "rafraîchit" à la bonne position.

Important Edit 3 (28 Août 2012)

Vous pouvez trouver tout cela emballé dans ce jsfiddle ( http://jsfiddle.net/q4rXm/17/ )

Answer 1

Il semble comme un redessiner bug dans IE. Une solution de contournement consiste à réinitialiser le fond de l'image en ajoutant

path_f.attr({fill:'url(http://www.fotoshack.us/fotos/58480536599_97943820.jpg)'});

après la traduction. Voir tripoter ici. Cela fonctionne bien dans IE9, sauf pour un peu lent, mais peut-être vous pouvez trouver un meilleur moyen de forcer l'affichage. Pas testé dans les anciennes IEs. Aussi, il provoque un scintillement dans l'Opéra et Chrome, de sorte que vous aurez besoin de détecter IE de sorte que vous ne réinitialisez le remplir si en cours d'exécution dans IE.

---

Edit: Une meilleure solution est de réinitialiser la taille de la toile:

group_a.translate( dx-this.ox, dy-this.oy );
rsr.setSize(720,540);

Cela ne cause pas de scintillement dans les autres navigateurs, donc pas besoin pour IE-détection.

Answer 2

C'est quelque chose lié au positionnement des éléments.

Essayez de donner absolue pour #playmask et pour ses parents donnent position:relative

Je me souviens de quelque chose comme cela, rencontré un peu avant, lors de la lecture avec Raphaël. Il est arrivé que dans IE, j'ai pensé que c'était un bug de Raphaël, et trouvé plus tard en raison de son positionnement.

Answer 3

J'ai eu quelques problèmes avec la VML éléments créés par Raphaël dans IE, surtout si vous essayez de flotter éléments sur le dessus d'autres éléments, etc.

La VML éléments semblent se retrouver dans bizarre endroits dans les DOM parfois, et avec d'étranges CSS valeurs, telles que la "position: static", où vous vous attendez "position: absolute" ou la "position: fixed". J'avais double-vérifier ceux CSS valeurs, et assurez-vous que ces éléments sont là où vous pensez qu'ils sont dans les DOM.

J'ai aussi eu Raphael réinitialiser la valeur de position du conteneur, c'est à dire "position: static". Dans ce cas, j'ai dû ajouter une ligne de ma feuille de style à force de revenir en arrière. Dans votre cas, vous pourriez essayer:

#playmask {
  position: absolute!important;
}

Bizarre, les choses semblent se produire à l'écoulement autour de ces VML éléments...

Answer 4

Pour toutes ces réponses en disant: IE9 ne peut gérer que VML et pas de SVG. Pas vrai. IE9 a l'appui indigène de SVG, dans une certaine mesure. OP avez-vous essayé de le faire avec un clipmask au lieu de les glisser autour d'un remplissage? Ma compréhension est que la modification de la position de la clipmask chemin d'accès doit être correctement "révéler" la bonne section de l'image. Espérons-le, ne devrait pas être trop dur après ceci, pour ajouter une image statique pour l'arrière-plan.