Jak przenieść wzór SVG z elementem

Question

I stworzył wzór SVG zobaczyć tutaj:

<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> 

Wtedy w moim skryptu stworzyłem elipsę, która używa wzoru. Problem polega na tym, że gdy poruszam elipsą, wzór pozostaje nadal za nią zamiast poruszać się z elipsą.

Jak skonfigurować wzór, aby pozostał z elementem?

Answer 1

Uważam, że należy zmienić elementy patternUnits na "objectBoundingBox" kontra userSpaceOnUse. To powinno naprawić rzeczy dla ciebie.

Aktualizacja:

Ta odpowiedź nie była poprawna - patternUnits powinny mieć żadnego wpływu na to, jak wzór jest rozplanowany, tylko jego wymiary (przestrzeni użytkownika jednostek vs. jednostek boundingbox). patternContentUnits to atrybut, który chcesz ustawić na "objectBoundingBox" - zauważ, że to skaluje twój wzorzec, jeśli zmienisz rozmiar obwiedni. Jeśli nie chcesz, aby tak się stało, musisz użyć atrybutu viewbox na swoim wzorze - co jest prawdopodobnie najlepszym sposobem uzyskania wyniku, którego prawdopodobnie szukasz (wzór o stałym rozmiarze, umieszczony względem jego obwiedni)

(również należy pamiętać, że ustawienie przepełnienie do widocznych rezultatów w „nieokreślone” rendering według spec AKA - nie coś, co chcesz zrobić)

Answer 2

trzeba użyć patternContentUnits = „objectBoundingBox” kliknij na prostokącie w tym przykładzie, aby zobaczyć: http://jsfiddle.net/longsonr/x8nkz/