拉斐尔有三种基本的移动路径。
如果该路径的填充图像具有PNG透明度，并且您需要IE8（VML），则这三个都存在缺陷。
如果您使用简单的转换......
path1.animate({transform: 't20,100'},1000);
...然后在IE8中，填充符号中的png透明度和半透明像素变黑。边缘变得像素化和丑陋，并且根据图像，您可能会在图像的半透明边缘周围获得一个蓬松的黑色轮廓。不好，在事件发生后似乎没有任何可靠的方法来解决这个问题。
有时，不一致的是，背景图像也不会保持相对于元素（更多内容）。
如果为path属性设置动画，例如：
path2.animate({path: Raphael.transformPath( path2.attr('path'), 't100,20') },1000);
... IE8不会破坏图像背景。但是，fix for making background images relative to the element not the paper不适用于这种方法（并且我尝试使用改进的背景图像偏移以及额外的“M-20，-20”元素来提供它的各种方法似乎不起作用），我找不到任何方法让 工作。
此外，在移动中进行大量转换可以打破背景图像修复依赖于VML模式的微妙IE8错误，导致背景移动。这似乎是不一致的 - 在上面的JSBin中，在IE8中，有时它们都会移动，有时只会移动顶部。
如果您使用翻译...
path3.translate(42,42);
...结果与转换相同（可能两者都使用相同的转换函数）。
使用Raphael image元素，可以fix this broken alpha by applying opacity with the transform in an attr or animate call。这不适用于路径填充。此外，关闭填充并从原始URL字符串重置填充不会消除损坏的alpha污染。你可以看到这个in this demo。
所以，我正在寻找一种方法来移动拉斐尔路径，该路径具有PNG透明度的背景图像a）保持图像相对于元素，始终如一并且b）没有通过将部分透明度变为像素化黑色来破坏IE8中的PNG透明度。
任何形式的转换都会出现类似问题 - 例如缩放，旋转等。
答案 0 :(得分：1)
我找不到任何好的答案：我发现的最接近的是IE8 transform的一个丑陋但功能性的解决方法（包裹在if(Raphael.type=='VML')中，所以你不要破坏真正的浏览器）：
path.attr({fill:'none'});），并将填充设置存储为path.data('fill',path.attr('fill')); setTimeout(function(){ })中）重新应用填充，例如path.attr({fill: path.data('fill')}); 关键的一点似乎是：在转换发生时不能应用填充，否则即使你删除并重新应用它也会永远毁掉它。注意这个时间 - 在变换完成之前必须重新填充填充（例如，注意带有动画或其他异步过程的竞争条件）。
如果您正在为变换设置动画，那么您的选项似乎是：