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

Change the patternContentUnits to "objectBoundingBox" (vs. userSpaceOnUse).

More: 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)