Javascript “如何制作图案”；固定的；在Raphael.js/IE中？

我正在创建一个小工具来说明偏光镜头的好处。基本上，用户将镜头（Raphael.js路径）拖动到令人眼花缭乱的场景（容器DIV的CSS背景）上，然后“看穿”镜头。以下是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);

#playmask

div有以下CSS（仅“非偏振”背景图像和大小）：

我一直坚持的是：

• 和往常一样，Chrome/Firefox玩得很好：镜头形状显示出来，在拖动镜头时填充图像看起来“固定”（参见第一张图片）
• IE版本7、8、9可以工作，但（令人惊讶！）它们的行为方式不同：填充图像“粘”到了镜头形状上（参见第二张附图）

我想问的是：我能让IE9/8/7以类似的方式工作吗，也就是说，在拖动镜头时保持填充图像固定？如果是，怎么做

Firefox屏幕截图：

IE9截图：

编辑使用Modernizr检测浏览器功能，我注意到这种奇怪的行为似乎与IE的无表情功能有关。 我发现IE9有一种奇怪的行为。。。背景不会“粘住”，但如果我拖动遮罩，选择一些文本并按下鼠标右键，它会将“极化”背景刷新到正确的位置

编辑2（2012年5月21日）还没有解决方案：（但更准确地说，它与的“无表情”功能没有任何关系；而在IE9上重现错误的正确方法是拖动玻璃，在页面的其余部分选择一些文本，然后滚动弹出的加速器图标（带箭头的蓝色眼镜）。眼镜bg在正确的位置神奇地“刷新”

重要编辑3（2012年8月28日）

---

您可以在（）中找到它。

我在IE中使用Raphael创建的VML元素时遇到了一些类似的问题，尤其是在尝试将元素浮动到其他元素之上时，等等

VML元素有时会出现在DOM中奇怪的地方，并带有奇怪的CSS值，例如“position:static”，在这里您可能会看到“position:absolute”或“position:fixed”。我会仔细检查这些CSS值，并确保这些元素位于您认为它们在DOM中的位置

我还让Raphael将IE中容器的位置值重置为“position:static”。在这种情况下，我必须在样式表中添加一行以强制其返回。在您的情况下，您可以尝试：

#playmask {
  position: absolute!important;
}

---

这些VML元素周围的流似乎发生了奇怪的事情…

这与元素的位置有关

尝试为#playmask指定绝对值，并为其父级指定位置：relative

---

我记得以前玩Raphael时遇到过类似的情况。这只发生在IE中，我认为这是Raphael中的一个bug，后来发现是因为定位问题。

对于所有这些答案，IE9只能处理VML而不能处理SVG。不是真的。IE9在一定程度上支持原生SVG。

---

OP您是否尝试过使用clipmask而不是拖动填充来执行此操作？我的理解是，更改clipmask路径的位置应该正确地“显示”图片的正确部分。希望在此之后添加静态图像作为背景不会太难。

这似乎是IE中的重画错误。一种解决方法是通过添加

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

翻译后..这在IE9中可以正常工作，只是有点迟钝，但也许你可以找到一种更便宜的强制重画方法。在旧版IEs中没有测试。而且，它会导致Opera和Chrome中闪烁，所以你需要检测IE，这样你只有在IE中运行时才能重置填充

---

编辑： 更好的选择是：

---

这不会在其他浏览器中引起闪烁，因此不需要IE检测。

+1了解问题的解释。@rajkamal非常感谢：）记住IE使用的是VML而不是SVG，你可能已经知道了这一点，但我认为值得一提的是，它有助于调查。我同意，这是一个写得很好的问题。+1.希望得到很好的答案。.如果其他一切都失败了，迪米特里·巴罗诺夫斯基（拉斐尔的作者）我将知道这一问题的原因和潜在解决方案。我听过他关于IE中动画的一次演讲——以及正确渲染动画所需的古怪填隙片。这可能是类似的情况。这是最好的。谢谢，但不幸的是，这并没有改变IE9上的任何内容。事实上，问题与播放掩码无关，而是与路径图有关ael path element.IE8太奇怪了。对我来说，只需两次声明fill attr（即使在转换之后也不需要），字面上只是在其后面复制和粘贴行，就可以产生这里想要的效果。另外值得一提的是，

setSize（）

方法在IE8中不起作用。通常人们使用Raphael实现IE8兼容性。但是，使用

元素.attr（'fill'，element.attr（'fill'））重置填充；

确实起作用。

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

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