Biến đổi SVG trong JavaScript

Question

Biến đổi SVG có thể được thực hiện thông qua JavaScript bằng cách đặt các thuộc tính tương ứng của chúng setAttribute("transform", "translate(x,y)") nhưng cũng có thể thông qua JavaScript nguyên bản.

elem.transform.baseVal.getItem(0).setTranslate(x, y); 
elem.transform.baseVal.getItem(0).setRotate(x, y); 

Hai dịch vụ này phải hoạt động để dịch và xoay, nhưng làm thế nào để xoay, chia tỷ lệ và ma trận? elem.transform.baseVal.getItem(0).setMatrix() tồn tại, nhưng theo như tôi có thể nói, nó không loại trừ bất kỳ params và SVGCreateMatrix() không chấp nhận bất kỳ params hoặc. Làm thế nào tôi phải làm điều này, và như một câu hỏi tiền thưởng: những gì hiện getItem(0) thực sự không?

Answer 1

Mỗi phần tử <svg> có phương thức dom createSVGMatrix.

var matrix = svgElement.createSVGMatrix(); 

Đây là ma trận nhận dạng.

Bạn có thể sau đó manipulate this ...

matrix = matrix.translate(10, 10); 

hoặc trực tiếp ...

matrix.a = 3; 

và sau đó sử dụng nó

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

getItem(0) được phần tử đầu tiên trong một thuộc tính transform ví dụ

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

getItem(0) được ma trận translate(1, 1) và getItem(1) nhận được scale(2) ma trận

Nếu bạn chưa thiết lập một biến đổi trên một yếu tố sau đó getItem(0) sẽ ném. Bạn có thể kiểm tra số lượng mục đang sử dụng numberOfItems và/hoặc thêm mục ban đầu bằng cách sử dụng createSVGTransformFromMatrix để biến ma trận thành biến đổi và appendItem để nối biến đổi.