使用 png 填充图像移动 Raphael 路径，而不破坏 IE 中的图像或相对于元素移动图像？答案

【问题标题】：Move Raphael path with png fill image, without breaking image in IE or moving image relative to element?使用 png 填充图像移动 Raphael 路径，而不破坏 IE 中的图像或相对于元素移动图像？
【发布时间】：2013-08-09 01:32:19
【问题描述】：

在 Raphael 中有三种基本的路径移动方式。

如果该路径有一个具有 PNG 透明度的填充图像，并且您需要 IE8 (VML)，那么这三个都是有缺陷的。

JSBin demo

如果你使用简单的变换...

path1.animate({transform: 't20,100'},1000);

...然后在IE8中，填充中的png透明度中断，半透明像素变黑。边缘变得像素化和丑陋，并且根据图像的不同，您可能会在图像的半透明边缘周围出现磨损的黑色轮廓。不好，而且在事件发生后似乎没有任何可靠的方法来解决这个问题。

有时，不一致的是，背景图像也不会相对于元素保持不变（更多内容见下文）。

如果为路径属性设置动画，例如这样：

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。

所以，我正在寻找一种方法来移动 Raphael 路径，该路径的背景图像具有 PNG 透明度，a) 始终保持图像相对于元素，b) 不t 通过将部分透明度变为像素化黑色来破坏 IE8 中的 PNG 透明度。

任何形式的变换都会出现类似的问题 - 例如缩放、旋转等。

【问题讨论】：

标签： svg internet-explorer-8 raphael opacity vml

【解决方案1】：

我找不到任何好的答案：我发现的最接近的是 IE8 transform 的一个丑陋但实用的解决方法（包装在 if(Raphael.type=='VML')s 中，所以你不会破坏真正的浏览器的东西）：

在对任何具有 alpha 透明度 PNG / 图案填充的内容进行任何转换之前，请移除图案填充 (path.attr({fill:'none'});)，并将填充设置存储为 path.data('fill',path.attr('fill'));
转换后，异步（例如，包裹在setTimeout(function(){ }) 中）重新应用填充，例如path.attr({fill: path.data('fill')});

关键的事情似乎是：在变换发生时不能应用填充，否则它会永远被破坏，即使你删除并重新应用它也是如此。请注意这方面的时间 - 在转换完成之前不能重新应用填充（例如，注意动画或其他异步进程的竞争条件）。

如果您要为变换设置动画，您的选择似乎是：

在动画之前清除填充，只接受在动画发生时不会有填充，并在动画完成后在回调中重新设置
实现您自己的动画处理程序，而不是在每一帧之前和之后移除并重新应用填充（当然，这有可能成为性能噩梦）。

【讨论】：