The first blog post
I actually encountered the same problem and found a solution. I've forked your fiddle to show the changes. Basically, you remove the patternContentUnits attribute as it doesn't help here and update the x attribute of the image to match that of the rect object after each update.
I know that if you were using
transform="translate(...)" instead of setting the
yattributes, the background does get translated as well, but the existing codebase I'm working within doesn't use translate for positioning (and it would have other unintended consequences on the rest of the application).