Edit:
There is a rough workaround that does not require hacking Raphael's kernel code, but depends on the not completely stable IE error described by https://github.com/DmitryBaranovskiy/raphael/issues/177
It works by hiding the SVG template object from Raphael, renaming it a Raphael object, as a result of which updatePosition() will not be called. This stops Raphael moving the background image in SVG mode. In VML mode, IE8 has an error in which, although the code moves the <fill> element, it does not refresh on the screen until it is forced to redraw.
path.patternTmp = path.pattern; delete path.pattern;
This has the same drawback as the assumption below that in VML mode it relies on an IE error. But it works for simple cases. I have not tested fully enough to see if there are other side effects of this fix, but it shouldn’t be - look at the Raphael source code, it looks like updatePosition() is the only Raphael function that uses element.pattern .
Please note that path.pattern needs to be renamed the way it is done every time the image is applied - therefore, if you use the placeholder by default, you need to re-execute this fix, and re-applying the fill will "fix IE error, we will depend from the fact that the image eludes synchronization with the object.
Original answer: There is a kind of correction here. This is ugly in two ways:
- For SVG, it relies on hacking Raphael's kernel code (but only a small hack).
- For VML, it relies on Internet Explorer redraw error and will fail if your code causes redraw
But you can get relative positions if your code does not cause IE to redraw (for example, by overriding the padding of an element).
Ideally, there would be a way to do this, which would work in IE VML, rather than relying on an error.
You can make this ugly almost correction by disabling the Raphael function updatePosition() somehow . The behavior described above is not an SVG standard, it is the Raphael function defined in the updatePosition() function, which seems to be designed to ensure that the behavior of the Raphael SVG elements matches what the VML elements would look like if Internet Explorer was not a collection errors along with errors. Note that the updatePosition() function is called only in SVG mode. VML populations should behave by default (but not reliably due to the redraw error described in the above related question ...).
My (ugly) way to do this is to change the updatePosition() function code to this:
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 + ")"}); } },
... then for each element that you want to have a relative fill, you set someElement.relativeFill = true;
Please note that this is not good practice - for example. a future Raphael update may use the relativeFill namespace for something else. This is just an example of a sticky gypsum fix that (roughly) works.
repeatedly. VML mode:. Theoretically, you can make this fix reliable and not error-dependent by adding a similar condition to the place in the Raphael functions of the VML mode setFillAndStroke and / or setCoords that set fill.position to the dynamic calculation. This seems to be the equivalent of VML updatePosition() . Theoretically, VML should default to fill with respect to the form, while alignshape = true for the fill element, which should be true by default .
But it doesn't seem to work in practice. From my testing, relying on an IE bug, as shown above, actually seems more reliable than trying to get IE VML to work as documented. In my testing, it's pretty hard to get IE8 to redraw the fill: only resetting the fill seems to do it.