Using Raphael JS, fill an SVG element with with a background-image with an offset

Question

I want to this this Fill SVG element with with a background-image with an offset, but using Raphael JS.

Displaying an rectangle with a background image without

Answer 1

The above with clip-rect only works for rectangles - if you need to set a background-position offset for a path, there's a relatively easy way:

1. Make the fill position relative to the shape (else things get messy)
2. Add an extra M segment with just two co-ordinates to the start of your path string. This changes the point that is considered the path's origin, thus changing the position the image begins at.

So imagine you had a triangle path defined as M0,0 50,0 25,35Z. If you want to offset the background image left by 20px and up by 5px, append M-20,-5 to the start of the string, giving M-20,-5 M0,0 50,0 25,35Z.

Here's a demo of exactly that:

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

Note that, the actual background offset will be the difference between the values you input and the top left bounding box of the path at the time the fill is applied. If you can make sure when defining the original path that this is 0,0, then life will be easier.

---

If you're thinking of defining a function or custom attribute that applies background position on the fly - for example, using element.getBBox() to counteract the above issue - be aware that there's a bug in VML mode which means that in IE8 any additional M segments get scrubbed out of the path if you update the path using .attr('path').

Also, in SVG mode, you need to refresh the fill, which may mean you need to reapply the relative position fix.

Here's a demo of a custom attribute working for the above in everything except IE8 - click the shape to update background position - with some failed attempts to make it work in IE8... http://jsbin.com/oxuyeq/13/edit