How would I move an SVG pattern with an element

You need to use patternContentUnits="objectBoundingBox" click on the rectangle in this example to see: http://jsfiddle.net/longsonr/x8nkz/

I believe you need to change the patternUnits to "objectBoundingBox" vs. userSpaceOnUse. This should fix things for you.

Update:

This answer was not correct - patternUnits should have no effect on how the pattern is laid out, only its dimensions (userspace units vs. boundingbox units). patternContentUnits is the attribute that you want to set to "objectBoundingBox" - note that that this will then scale your pattern if you change the size of the bounding box. If you don't want this to happen, then you need to use a viewbox attribute on your pattern - which is probably the right way to get the result you're probably looking for (fixed size pattern, positioned relative to its bounding box)

(Also please note that setting overflow to visible results in "undefined" rendering according to the spec aka - not something that you want to do)