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?

score 4 · Answer 1 · answered Apr 28 '12 at 08:26

4

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

answered Apr 28 '12 at 08:26

Robert Longson

118,664
26
252
242

Note that if you're changing the parents height also, the pattern will get scaled. Which in my case sucks. – Martin Zvarík Dec 01 '18 at 18:28
The fiddle posted here perfectly matches. The problem in the question persists with Chrome 93. – Christian Sep 08 '21 at 08:20
1

@Christian then raise a chrome bug on its bugtracker if chrome is different to Firefox and safari – Robert Longson Sep 08 '21 at 09:35

Michael Mullany · Accepted Answer · 2021-09-08T09:02:09.620

2

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)

edited Sep 08 '21 at 09:02

answered Apr 28 '12 at 01:06

Michael Mullany

30,283
6
81
105

That seems to make the pattern only show in a specific place, but it still does not move with the object. – fishpen0 Apr 28 '12 at 01:32
Turns out it was a problem with firefox, you were correct afterall. – fishpen0 Apr 29 '12 at 05:46
Does not work for me in Chrome 93 - pattern does not move with element. – Christian Sep 08 '21 at 08:06

How would I move an SVG pattern with an element

2 Answers2

Linked