javascript - ¿Cómo hacer un patrón "fijo" en Raphael.js/IE?

svg drag

Question

Estoy creando una pequeña herramienta para ilustrar los beneficios de los lentes polarizados. Básicamente, un usuario arrastrará las lentes (una ruta Raphael.js) sobre una escena deslumbrante (el fondo CSS del contenedor DIV) y "verá" las lentes. Aquí está el código 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);

El div #playmask tiene este CSS (solo la imagen de fondo "no polarizada" y el tamaño):

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

Lo que estoy atrapado es:

• Chrome / Firefox, como siempre, juega bien: aparece la forma de las lentes, y la imagen de relleno parece "fija" mientras arrastras las lentes (ver la primera foto);
• Las versiones IE 7,8,9 funcionan, pero (¡por sorpresa!) No se comportan de la misma manera: la imagen de relleno está "pegada" a la forma del objetivo (ver la segunda imagen adjunta).

Lo que estoy preguntando aquí es: ¿puedo hacer que IE9 / 8/7 se comporte de manera similar, es decir, manteniendo fija la imagen de relleno mientras arrastra los lentes? ¿Si es así, cómo?

Captura de pantalla de Firefox:

Captura de pantalla de IE9:

Editar Usando Modernizr para detectar las características del navegador, noté que este comportamiento extraño parece estar relacionado con la característica "no smil" de IE. Descubrí un comportamiento extraño de IE9 ... el fondo no se "pega", pero si arrastro la máscara, selecciono texto y presiono el botón derecho del mouse, refresca el fondo "polarizado" a la posición correcta.

Editar 2 (21 de mayo de 2012) Todavía no hay solución :( pero para ser más precisos, no se relaciona de ninguna manera con la función "no smil" , y la forma correcta de reproducir el error en IE9 es arrastrar el cristal alrededor , seleccione un texto en el resto de la página y mueva el ícono del acelerador que aparece (el azul con una flecha). Las gafas bg mágicamente se "refrescan" en la posición correcta.

Importante Editar 3 (28 de agosto de 2012)

Puede encontrarlo todo empaquetado en este jsfiddle ( http://jsfiddle.net/q4rXm/17/ )

Answer 1

Esto es algo relacionado con el posicionamiento de los elementos.

Intente dar absoluta por #playmask y por su posición de entrega principal: relativa

Recuerdo algo como esto encontrado alguna vez antes cuando jugaba con Raphael. Sucedió solo en IE, pensé que era un error en Raphael, más tarde descubrí que se debe a la posición.

Answer 2

He tenido algunos problemas similares con los elementos VML creados por Raphael en IE, especialmente cuando intento flotar elementos sobre otros elementos, etc.

Los elementos VML parecen terminar en lugares extraños en DOM a veces, y con valores de CSS extraños, como "posición: estática", donde se esperaría "posición: absoluta" o "posición: fija". Revisaría esos valores de CSS y me aseguraré de que esos elementos estén donde crees que están en el DOM.

También hice que Raphael restableciera el valor de posición del contenedor en IE a "posición: estático". En ese caso, tuve que agregar una línea a mi hoja de estilo para forzarlo de nuevo. En tu caso, podrías intentar:

#playmask {
  position: absolute!important;
}

Cosas raras parecen suceder al flujo alrededor de esos elementos VML ...

Answer 3

Para todas las respuestas que dicen que IE9 solo puede manejar VML y no SVG. No es verdad. IE9 tiene soporte SVG nativo, en cierta medida. OP ¿Ha intentado hacer esto con una máscara de clip en lugar de arrastrar un relleno? Según entiendo, cambiar la posición de la ruta clipmask debería "revelar" correctamente la sección correcta de la imagen. Con suerte, no debería ser demasiado difícil después de esto para agregar una imagen estática para el fondo.

Answer 4

Parece un error de redibujo en IE. Una solución es restablecer la imagen de relleno añadiendo

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

después de la traducción. Ver violín aquí . Esto funciona bien en IE9 excepto por ser un poco lento, pero tal vez puedas encontrar una forma más barata de forzar los rediseños. No probado en IEs anteriores. Además, causa parpadeos en Opera y Chrome, por lo que deberá detectar IE para que solo restablezca el relleno si se ejecuta en IE.

Editar: una mejor alternativa es restablecer el tamaño del lienzo :

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

Esto no causa parpadeos en otros navegadores, por lo que no es necesario detectar IE.