How would I move an SVG pattern with an element

Question

I created the svg pattern seen here:

<pattern id="t" height="20" width="20" patternUnits="userSpaceOnUse" overflow="visible">
    <ellipse cx="0" cy="0" rx="20" ry="20" fill="white"/>
    <ellipse cx="5" cy="5" rx="15" ry="15" fill="yellow"/>
    <ellipse cx="10" cy="10" rx="10" ry="10" fill="blue"/>
    <ellipse cx="15" cy="15" rx="5" ry="5" fill="red"/>
</pattern>

Then in my script I created an ellipse that uses the pattern. The problem is, when I move the ellipse around, the pattern stays still behind it instead of moving with the ellipse.

How do I configure the pattern to stay with the element?

Answer 1

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

Answer 2

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)