svg - Move Raphael path with png fill image, without breaking image in IE or moving image relative to element? -

there 3 basic ways move path in raphael.

if path has fill image has png transparency, , need ie8 (vml), 3 flawed.

jsbin demo

---

if use simple transform...

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

...then in ie8, png transparency in fill breaks , translucent pixels turn black. edges become pixelated , ugly, , depending on image might scuffy black outline around translucent edge of image. not good, , there doesn't seem reliable way fix after event.

sometimes, inconsistently, background image doesn't stay relative element (more on below).

---

if animate path attribute, example this:

path2.animate({path: raphael.transformpath( path2.attr('path'), 't100,20') },1000); 

...ie8 doesn't wreck image background. however, fix making background images relative element not paper not work method (and various ways i've tried bodge using improved background image offset additional "m-20,-20" element don't seem work), , can't find way make that work either.

also, having lots of transformations on go can break delicate ie8 bug background image fix depends on in vml mode, causing background move. seems inconsistent - jsbin above, in ie8, move, top 1 moves.

---

if use translate...

path3.translate(42,42); 

...the results same transform (presumably both use same translate functions).

---

with raphael image elements, it's possible fix broken alpha applying opacity transform in attr or animate call. doesn't work path fills. also, turning off fill , resetting original url string doesn't remove broken alpha contamination. can see in demo.

---

so, i'm looking way move raphael path has background image has png transparency a) keeps image relative element, consistently , b) doesn't wreck png transparency in ie8 turning partial transparency pixelated black.

---

similar problems occur form of transformation - such scale, rotate etc.

i can't find answer this: closest i've found ugly functional workaround ie8 transform (wrapped in if(raphael.type=='vml')s don't spoil things real browsers):

• before doing transform has alpha transparency png / pattern fill, remove pattern fill (path.attr({fill:'none'});), storing fill setting path.data('fill',path.attr('fill'));
• after transform, asynchronously (e.g. wrapped in settimeout(function(){ })) re-apply fill e.g. path.attr({fill: path.data('fill')});

the crucial thing seems be: the fill must not applied when transform occurs, else it'll ruined forever, if remove , re-apply it. careful timing on - mustn't possible fill re-apply before transform completes (e.g. watch out race conditions animations or other async processes).

---

if you're animating transform, options seem to either:

• clear fill before animation, accept there no fill while animation takes place, , re-set in callback after animation completes
• implement own animation handler removes , re-applies fill before , after every frame (this, of course, risks being performance nightmare).