javascript - Cum aș putea muta un model SVG cu un element

Am creat modelul SVG văzut aici:

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

Apoi, în scriptul meu am creat o elipsă care folosește modelul. Problema este că, atunci când mut elipsa, modelul rămâne nemișcat în spatele ei în loc să se miște odată cu elipsa.

Cum configurez modelul să rămână cu elementul?

Răspuns #1

Trebuie să folosești patternContentUnits="objectBoundingBox" și să dai clic pe dreptunghi în acest exemplu pentru a vedea: http://jsfiddle.net/longsonr/x8nkz/

Răspunsul #2

Schimbați patternContentUnits în „objectBoundingBox” (în loc de userSpaceOnUse).

Mai mult: patternUnits nu ar trebui să aibă efect asupra modului în care este așezat modelul, ci doar asupra dimensiunilor sale (unități de spațiu utilizator versus unități de bounding box). patternContentUnits este atributul pe care vrei să-l setezi la "objectBoundingBox" - reține că acest lucru va scala modelul dacă modifici dimensiunea casetei de delimitare. Dacă nu vrei să se întâmple acest lucru, atunci trebuie să folosești un atribut viewBox pentru modelul tău - ceea ce este probabil modul corect de a obține rezultatul pe care probabil îl cauți (model de dimensiune fixă, poziționat relativ la caseta sa de delimitare)

(De asemenea, vă rugăm să rețineți că setarea overflow pe visible duce la randarea „undefined” conform specificațiilor, adică nu este ceva ce doriți să faceți)