Trasformazioni SVG in JavaScript

Question

Le trasformazioni SVG possono essere eseguite tramite JavaScript impostando i relativi attributi setAttribute("transform", "translate(x,y)") ma dovrebbero anche essere possibili tramite puro JavaScript.

Questi due dovrebbero funzionare per la traslazione e la rotazione, ma per quanto riguarda l'inclinazione, il ridimensionamento e la matrice? elem.transform.baseVal.getItem(0).setMatrix() esiste, ma per quanto posso dire, non esclude alcun parametro e SVGCreateMatrix() non accetta alcun parametro neanche. Come dovrei fare questo, e come domanda bonus: cosa fa effettivamente lo getItem(0)?

Answer 1

Ogni elemento <svg> ha un metodo dom createSVGMatrix.

var matrix = svgElement.createSVGMatrix(); 

Questa è la matrice identità.

È possibile quindi manipulate this ...

matrix = matrix.translate(10, 10); 

o direttamente ...

matrix.a = 3; 

e quindi utilizzarlo

elem.transform.baseVal.getItem(0).setMatrix(matrix); 

getItem(0) ottiene il primo elemento di un attributo trasformare per esempio

transform="translate(1, 1) scale(2)" 

getItem(0) ottiene la matrice translate(1, 1) e getItem(1) ottiene il scale(2) matrice

Se non è stata impostata una trasformazione su un elemento poi getItem(0) getteranno. Puoi controllare quanti articoli ci sono usando numberOfItems e/o aggiungere un oggetto iniziale usando createSVGTransformFromMatrix per trasformare la tua matrice in una trasformazione e appendItem per aggiungere la trasformazione.