Come rendere "fisso" un pattern in Raphael.js/IE?

Question

Sto creando un piccolo strumento per illustrare i vantaggi degli obiettivi polarizzanti. Fondamentalmente un utente trascina gli obiettivi (un percorso Raphael.js) su una scena abbagliante (lo sfondo CSS del contenitore DIV) e "vede attraverso" le lenti. Ecco il codice 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); 

Il #playmask div ha questo (solo l'immagine di sfondo "non-polarizzato" e la dimensione) CSS:

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

Quello che mi sono bloccato con è:

• Chrome/Firefox, come sempre, gioca bene: la forma delle lenti si presenta e l'immagine di riempimento appare "fissa" mentre si trascinano le lenti (vedi la prima foto);
• Le versioni di IE 7,8,9 funzionano, ma (sorpresa!) Non si comportano allo stesso modo: l'immagine di riempimento è "incollata" alla forma dell'obiettivo (vedere la seconda foto allegata).

Quello che sto chiedendo è: posso fare in modo che IE9/8/7 si comporti in un modo simile, cioè mantenendo fissa l'immagine di riempimento mentre si trascinano gli obiettivi? Se é cosi, come?

Firefox screenshot:

IE9 screenshot:

Modifica Utilizzando Modernizr per rilevare le caratteristiche del browser, ho notato che questo strano comportamento sembra legato alla "no-smil" caratteristica di IE. Ho scoperto un comportamento bizzarro di IE9 ... lo sfondo non "si attacca", ma se trascino la maschera, seleziono del testo e premo il tasto destro, aggiorna lo sfondo "polarizzato" alla corretta posizione!!

Edit 2 (21 maggio 2012) Nessuna soluzione ancora :(ma per essere più precisi, non si riferisce in alcun modo alla "no-smil" funzione, e, il modo corretto per riprodurre il bug su IE9 è trascinare il vetro intorno, selezionare del testo nel resto della pagina e scorrere sopra l'icona dell'acceleratore che si apre (quella blu con una freccia dentro) Gli occhiali bg magicamente si "rinfrescano" nella posizione corretta .

Importante Edit 3 (28 agosto 2012)

si può trovare tutto confezionato in 0.123.(http://jsfiddle.net/q4rXm/17/)

Answer 1

Sembra un bug di ridisegno in IE. Una soluzione alternativa consiste nel ripristinare l'immagine di riempimento aggiungendo

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

dopo la traduzione. See fiddle here. Funziona bene in IE9 tranne che per essere un po 'pigro, ma forse puoi trovare un modo più economico di forzare i ridisegni. Non testato nei vecchi IE. Inoltre, provoca lo sfarfallio in Opera e Chrome, quindi dovrai rilevare IE in modo da reimpostare il riempimento solo se in esecuzione in IE.

---

Edit: Una migliore alternativa è quella di reset the size of the canvas:

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

ciò non comporti tremolante in altri browser, senza necessità di IE-rilevamento.

Answer 2

Ho avuto un paio di problemi simili con gli elementi VML creati da Raffaello in IE, soprattutto quando si cerca di galleggiare elementi sopra la parte superiore di altri elementi, ecc

Gli elementi VML sembrano a volte finiscono in posti strani nel DOM e con strani valori CSS, come "position: static", dove ti aspetteresti "position: absolute" o "position: fixed". Vorrei ricontrollare quei valori CSS e assicurarmi che quegli elementi siano dove pensi che siano nel DOM.

Ho anche avuto Raphael ripristinare il valore di posizione del contenitore in IE a "posizione: statico".In tal caso, ho dovuto aggiungere una riga al mio foglio di stile per forzare il ritorno. Nel tuo caso, si potrebbe provare:

#playmask { 
    position: absolute!important; 
} 

cose strane sembrano accadere al flusso intorno a quegli elementi VML ...

Answer 3

Si tratta di qualcosa legato al posizionamento degli elementi.

provare a dare assoluta per #playmask e per il suo genitore dare position: relative

Mi ricordo qualcosa di simile ha incontrato qualche tempo prima quando si gioca con Raphael. E 'successo solo in IE, ho pensato che fosse un bug in Raphael, in seguito trovato a causa del posizionamento.

Answer 4

Per tutte quelle risposte che dicono che IE9 può gestire solo VML e non SVG. Non vero. IE9 ha supporto SVG nativo, in una certa misura. OP hai provato a farlo con una maschera di ritaglio invece di trascinare un riempimento? La mia comprensione è che cambiare la posizione del percorso della maschera di ritaglio dovrebbe "rivelare" correttamente la sezione corretta dell'immagine. Si spera non dovrebbe essere troppo difficile dopo questo per aggiungere un'immagine statica per lo sfondo.