如何在Raphael.js / IE中使图案“固定”？

Question

我正在创建一个小工具，用于说明偏振镜的好处。基本上，用户将拖动镜片（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（只有“非极化”背景图像和大小）：

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

我所遇到的问题是：

• Chrome/Firefox一如既往地表现良好：透镜形状显示出来，填充图像在拖动透镜时看起来“固定”（见第一张图片）；
• IE7、8、9版本可以工作，但（惊喜！）它们的行为方式不同：填充图像“粘”在透镜形状上（见第二张附加图片）。

我在这里询问的是：我是否可以使IE9/8/7以类似的方式运行，即在拖动透镜时保持填充图像固定？如果可以，怎么做？

Firefox 截图： IE9 截图： 编辑 使用Modernizr检测浏览器功能时，我注意到这种奇怪的行为似乎与IE的"no-smil"功能有关。 我发现了一个奇怪的行为，IE9的背景不会"粘"在原位，但如果我拖动遮罩层，选择一些文本并按右键，它会刷新"极化"背景到正确的位置!!

编辑2（2012年5月21日）目前还没有解决方案:(但更准确地说，它与"no-smil"功能没有任何关系; 在IE9上重现错误的正确方法是拖动玻璃，选择页面其余部分中的一些文本，并滚动加速器图标（带箭头的蓝色图标）。眼镜的背景神奇地在正确的位置上“刷新”。

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

你可以在 这个 jsfiddle ( http://jsfiddle.net/q4rXm/17/ ) 中找到所有打包的内容。

- Paolo Stefan

---

对于问题解释的方式，我给一个赞。 - Rajkamal Subramanian

请记住，IE使用VML而不是SVG。您可能已经知道这一点，但我认为值得提一下，以便在调查时有所帮助。 - Neil

我同意，问题写得非常好。+1。期待一个很棒的答案。 - Nash Worth

如果一切都失败了，Dimitry Baronovsky（Raphael的作者）将知道此问题的原因和可能的解决方法。我听过他关于IE中动画的演讲 - 以及为了正确呈现它所需的古怪支架。这可能是类似的情况。祝一切顺利。 - Nash Worth

@dsummersl 是的，希望它能有所帮助... 你可以在这里找到它 http://jsfiddle.net/q4rXm/2/ （我也编辑了我的问题） - Paolo Stefan

Answer 1

似乎是IE中的重绘缺陷。一种解决方法是通过添加代码来重置填充图像。

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

在翻译完成后，请在此处查看代码。这个代码在IE9中工作得还可以，除了速度稍微有点慢之外，但是也许你能找到更便宜的方法来强制重绘。未在旧版IE中进行测试。此外，它会在Opera和Chrome中引起闪烁，因此您需要检测IE，以便仅在运行IE时重置填充。

---

编辑： 更好的替代方案是重置画布的大小：

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

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

- Supr

---

IE8太奇怪了。对我来说，只需将fill属性声明两次 - 甚至不需要在转换之后，只需将该行复制并粘贴到自身之后 - 就可以产生所需的效果。 - user56reinstatemonica8

另外值得一提的是，setSize() 方法在 IE8 中不起作用。通常人们使用 Raphael 来实现 IE8 兼容性。然而，使用 element.attr('fill', element.attr('fill') ); 重置填充是有效的。 - user56reinstatemonica8

Answer 2

这是与元素定位相关的内容。

尝试为 #playmask 给出 absolute，对于其父元素给出 position:relative。

我记得以前在使用 Raphael 时遇到过类似的情况。它只发生在 IE 中，我曾认为这是 Raphael 的一个 bug，后来发现这是由于元素定位引起的。

- kiranvj

Answer 3

所有那些声称IE9只能处理VML而不能处理SVG的回答都是不正确的。IE9本身支持SVG，但仅限于一定程度上。 楼主，你是否尝试使用剪贴蒙版代替拖动填充来实现这个？我的理解是改变剪贴蒙版路径的位置应该能够正确“揭示”图片的正确部分。希望在此之后很容易为背景添加静态图像。

- chris

Answer 4

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

VML元素有时会出现在DOM中奇怪的位置，并带有奇怪的CSS值，例如“position：static”，而您期望的是“position：absolute”或“position：fixed”。 我建议您仔细检查这些CSS值，并确保这些元素位于您认为它们在DOM中的位置。

我也曾经让Raphael在IE中重置容器的位置值为“position：static”。 在那种情况下，我不得不在我的样式表中添加一行来强制它返回。 在您的情况下，您可以尝试：

#playmask {
  position: absolute!important;
}

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

- Chris Jaynes

---

谢谢，但不幸的是这并没有改变IE9上的任何东西。事实上，问题与#playmask无关，而是与path_f Raphael路径元素有关。 - Paolo Stefan