Applying a scaled SVG pattern to a translated path

Question

I'm confused as to why a scaled tiled pattern doesn't line up perfectly with the borders of the object it's being applied to in the case of this: http://jsfiddle.net/J8xeR/

For reference, the pattern is defined as such:

<pattern id="tile" x="15" y="15" width="150" height="130"
    patternUnits="userSpaceOnUse" patternTransform="scale(.4,.4)">
    <image fill="#000000" width="150" height="130" preserveAspectRatio="none" xlink:href="http://good-b.com/wp-content/uploads/2011/06/star1.jpg"></image>
</pattern>

Additionally, the pattern is being applied here:

<rect x="15" y="15" width="150" height="130" style="fill: url(#tile);" />

I'm especially confused because the patternUnits attribute of the pattern is set to "userSpaceOnUse" and the x and y of both the pattern and the rect are the same, yet it looks like the pattern is slightly offset.

I determined that if you set the x and y of the pattern to 37.5 (= 15 / .4) then the borders do line up properly; however, is there a cleaner way to achieve the same thing? This becomes especially problematic if instead of a rectangle, you have an equivalent path that is rotated by some amount. I'm not even sure how I would orient and line up the pattern correctly at that point.