如何使拉斐尔填充图案与元素一起移动？(相对于元素的背景图像位置)

Question

我怎么可以给拉斐尔元素移动作为元素的动作,怎么样的CSS填充background-image一个的position: absolute;HTML元素将保持相对于它的位置相同的位置,因为它感动？

这是一个示例演示:如何将Raphael元素(三角形路径)的背景图像模式与HTML元素(方形div)拖动时的行为相同？

http://jsbin.com/oxuyeq/8/edit

---

这个问题基本上与如何在Raphael.js/IE中使模式"修复"相反？使用偏振眼镜模拟器 - 我想在所有浏览器(包括IE8)中使他们试图避免一致的IE特定行为.

正如其他问题所详述的那样,仅在IE8(VML)中,Raphael元素就是我想要的; 但即使是这样飘忽不定:就像调用各种事情setSize上paper元素或重新定义填充(基本上,任何迫使重绘),导致它切换到其他行为.

---

纯SVG有一个类似的问题,但在写作时没有任何好的答案,当然没有一个适用于Raphael.

---

编辑2:观察SVG模式中发生的事情,似乎每个Raphael变换也会自动对svg <pattern>元素进行相同的矩阵变换.我认为这是导致我试图避免的行为的原因 - 我认为patternContentUnits并且patternUnits是无关的.这里似乎有一个未解决的问题(突出显示与剪辑相同的问题,在线旁边this.pattern && updatePosition(this);) - https://github.com/DmitryBaranovskiy/raphael/issues/638

因此,一种可能性是定义一个自定义属性,该属性将变换应用于元素,而不将其应用于模式.听起来很难 - 可能需要黑客拉斐尔或复制大量拉斐尔变换代码.希望还有其他一些方法.而上帝帮助我们做出在VML这项工作 ...

---

编辑3:一些可能相关的信息,不仅仅是有这个问题的路径填充.image创建的Raphael 元素paper.image()在SVG模式下没有这个问题,但是在IE8 VML模式下有一个非常类似的问题.下面是几个使图像元素移动的方法的演示,这里是一个并排比较,显示它们在非IE中完美无缺地工作,并且在IE中都失败了:

Answer 1

编辑：

有一个粗略的解决方法，不需要破解 Raphael 核心代码，但确实依赖于不完全稳定的 IE 错误，描述为 https://github.com/DmitryBaranovskiy/raphael/issues/177

它的工作原理是通过在 Raphael 对象中重命名 SVG 图案对象来隐藏 Raphael 对象，从而导致updatePosition()不被调用。这会阻止 Raphael 在 SVG 模式下移动背景图像。在 VML 模式下，IE8 有一个错误，即使代码移动了<fill>元素，它也不会在屏幕上更新，直到强制重绘。

path.patternTmp = path.pattern;
delete path.pattern;

这与下面的建议具有相同的其他缺点，即在 VML 模式下它依赖于 IE bug。但它适用于简单的情况。我还没有进行足够的测试来看看这个修复是否有其他副作用，但不应该有 - 查看 Raphael 的源代码，它看起来updatePosition()是唯一使用element.pattern.

http://jsbin.com/oxuyeq/10/edit

请注意，path.pattern每次应用图像填充时都必须像这样重命名 - 因此，如果您出于任何原因重新应用填充，则需要重新执行此修复 - 并且重新应用填充将“修复”我们的 IE 错误取决于导致图像与物体不同步。

原始答案：这是一种修复方法。它的丑陋有两个方面：

• 对于 SVG，它依赖于破解 Raphael 核心代码（但只是一个小破解）
• 对于 VML，它依赖于 Internet Explorer 重绘错误，如果您的代码导致重绘，则会失败

但只要您的代码不触发 IE 重绘（例如通过重新设置元素的填充），您就可以获得相对位置。

理想情况下，有一种方法可以在 IE VML 中稳定运行，而不是依赖于错误。

你可以通过某种方式关闭 Raphael 函数updatePosition()来完成这个丑陋的几乎修复。上面描述的行为不是 SVG 默认行为，它是函数中定义的 Raphael 功能，该功能updatePosition()似乎旨在使 Raphael SVG 元素的行为与 VML 元素的行为相匹配（如果 Internet Explorer 不是一堆错误）错误。请注意，该updatePosition()函数仅在 SVG 模式下调用 - VML 填充默认情况下应该以这种方式运行（但由于上面链接的问题中描述的重绘错误而并不可靠......）。

我的（丑陋的）方法是将updatePosition()函数代码修改为：

updatePosition = function (o) {
    if(!o.relativeFill) {  // <<< added this condition
        var bbox = o.getBBox(1);
        $(o.pattern, {patternTransform: o.matrix.invert() + " translate(" + bbox.x + "," + bbox.y + ")"});          
    }
},

...然后，对于您想要相对填充的每个元素，您设置someElement.relativeFill = true;

请注意，这不是一个好的做法- 例如，未来的 Raphael 更新可能会将relativeFill 命名空间用于其他用途。这只是一个（几乎）有效的粘性膏药修复的例子。

关于。VML 模式：理论上，您可以通过向 VML 模式 Raphael 函数中的位置setFillAndStroke和/或setCoords设置fill.position为动态计算的位置添加类似的条件，使此修复变得稳健且不依赖于错误。这些似乎是 VML 的等价物updatePosition()。理论上，只要alignshape = true填充元素，VML 就应该默认设置相对于形状的填充，理论上默认情况下应该是 true。

但是，在实践中似乎并非如此。根据我的测试，依赖上述 IE bug 实际上似乎比尝试让 IE VML 按照文档那样工作更可靠。在我的测试中，让 IE8 重绘填充相当困难：似乎只有重置填充才能做到这一点。