使用香草JavaScript围绕其中心旋转SVG矩形

开始…

小提琴

这里的一些文档代码：

let SVG = ((root) => {
    let ns = root.getAttribute('xmlns');
    return {
        e (tag) {
            return document.createElementNS(ns, tag);
        },
        add (e) {
            return root.appendChild(e)
        },
        matrix () {
            return root.createSVGMatrix();
        },
        transform () {
            return root.createSVGTransformFromMatrix(this.matrix());
        }
    }
 })(document.querySelector('svg.stage'));

class Rectangle {
    constructor (x,y,w,h) {
        this.node = SVG.add(SVG.e('rect'));
        this.node.x.baseVal.value = x;
        this.node.y.baseVal.value = y;
        this.node.width.baseVal.value = w;
        this.node.height.baseVal.value = h;
        this.node.transform.baseVal.initialize(SVG.transform());
    }
    rotate (gamma, x, y) {
        let t  = this.node.transform.baseVal.getItem(0),
            m1 = SVG.matrix().translate(-x, -y),
            m2 = SVG.matrix().rotate(gamma),
            m3 = SVG.matrix().translate(x, y),
           mtr = t.matrix.multiply(m3).multiply(m2).multiply(m1);
        this.node.transform.baseVal.getItem(0).setMatrix(mtr);
    }
}

谢谢@Philipp，

可以通过以下任一方式解决捕捉SVG中心的问题：

• 使用.getBoundingClientRect()和考虑4px的尺寸调整在每侧都是额外的，因此需要调整的结果为：

   BoxC = self.getBoundingClientRect();        
   Pc = {
       x: (BoxC.left - 4) + (BoxC.width - 8)/2,
       y: (BoxC.top  - 4) + (BoxC.height - 8)/2
   };
  

  或通过：

• 将.(x/y).baseVal.value捕获为：

  Pc = {
       x: self.x.baseVal.value + self.width.baseVal.value/2, 
       y: self.y.baseVal.value + self.height.baseVal.value/2
  };
  

下面是完整的运行代码：

let ns="http://www.w3.org/2000/svg";
var root = document.createElementNS(ns, "svg");
    root.style.width='100%';
    root.style.height='100%';
    root.style.backgroundColor = 'green';
document.body.appendChild(root);
//let SVG = function() {};  // let SVG = new Object(); //let SVG = {};
class SVG {};
SVG.matrix = (()=> { return root.createSVGMatrix(); });
SVG.transform = (()=> { return root.createSVGTransformFromMatrix(SVG.matrix()); });
SVG.translate = ((x,y)=> { return SVG.matrix().translate(x,y) });
SVG.rotate = ((r)=> { return SVG.matrix().rotate(r); });
class Rectangle {
	constructor (x,y,w,h,fill) {                            
  	this.node = document.createElementNS(ns, 'rect');
    self = this.node;  
        self.x.baseVal.value = x;
        self.y.baseVal.value = y;
        self.width.baseVal.value = w;
        self.height.baseVal.value = h;
        self.style.fill=fill;
        self.transform.baseVal.initialize(SVG.transform());  // to generate transform list
    this.transform  = self.transform.baseVal.getItem(0),  // to be able to read the matrix
    this.node.addEventListener("click",this,false);
  }
}
Object.defineProperty(Rectangle.prototype, "draw", {
    get: function(){ return this.node;}
});
Object.defineProperty(Rectangle.prototype, "CenterPoint", {
    get: function(){ 
                   var self = this.node;
                   self.bbox = self.getBoundingClientRect();  // There is 4px shift in each side   
                   self.bboxC = {
                       x: (self.bbox.left - 4) + (self.bbox.width - 8)/2,
                       y: (self.bbox.top  - 4) + (self.bbox.height - 8)/2
                 };
                 // another option is:
                 self.Pc = {
                       x: self.x.baseVal.value + self.width.baseVal.value/2, 
                       y: self.y.baseVal.value + self.height.baseVal.value/2
                 };
       return self.bboxC;          
    //   return self.Pc;  // will give same output of bboxC
         }
});
Rectangle.prototype.animate = function () {
	let move01 = SVG.translate(this.CenterPoint.x,this.CenterPoint.y), 
    		move02 = SVG.rotate(10), 
            move03 = SVG.translate(-this.CenterPoint.x,-this.CenterPoint.y); 
            movement = this.transform.matrix.multiply(move01).multiply(move02).multiply(move03);
      this.transform.setMatrix(movement);
}
Rectangle.prototype.handleEvent= function(evt){
  self = evt.target;             // this returns the `rect` element
switch (evt.type){
    case "click":   
       if (typeof self.moving == 'undefined' || self.moving == false) self.moving = true;
       else self.moving = false;
 
     if(self.moving == true){
     self.move = setInterval(()=>this.animate(),100);
     }
      else{
       clearInterval(self.move);
      }        
    break;
    default:
    break;
 } 
} 
for (var i = 0; i < 10; i++) {
    var x = Math.random() * 100,
        y = Math.random() * 300;
    var r= new Rectangle(x,y,10,10,'#'+Math.round(0xffffff * Math.random()).toString(16));
    root.appendChild(r.draw);
}