JavaScript 围绕特定点旋转 SVG 对象 `transform: rotate()`

Question

我有以下运行正常的代码，创建路径并在单击时旋转它。

我想围绕特定点旋转路径，当我使用下面的 rotate(45 50 50) 而不是 rotate(x) 时，我收到此错误: VM267:85 未捕获的语法错误:参数列表后缺少 ) 我该怎么办？

注意对使用任何现成的库来处理任务不感兴趣，只需要使用标准 API。谢谢

var NS="http://www.w3.org/2000/svg";  
var SVG=function(el){
    return document.createElementNS(NS,el);
}
 
 svg = SVG('svg');
  svg.setAttribute("width", "100%");
  svg.setAttribute("height", "100%");
 //   svg.width='50em';  // Not working
document.body.appendChild(svg);
var bbox = svg.getBoundingClientRect();
     var center = {
          x: bbox.left + bbox.width/2,
          y: bbox.top  + bbox.height/2
     };

class myPath {
     constructor(cx,cy) {
     this.path=SVG('path');
   //  https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
   //  https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
     var d="M" + cx + " " + cy; 

     d = d + "L175 120 L125 120 Z";
     this.path.setAttribute("d", d);
     this.path.setAttribute("fill", "#F7931E");
     this.path.addEventListener("click",this,false);
   }
   get draw(){
       return this.path;
   }
 }
 
 myPath.prototype.rotate = function(x) {
 /*
   var path = this.path.getBoundingClientRect();
     var Pc = {
          x: bbox.left + bbox.width/2,
          y: bbox.top  + bbox.height/2
     };  */
   return svg.createSVGTransformFromMatrix(svg.createSVGMatrix().rotate(x));
   // https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform
}

myPath.prototype.animate = function() {
       self = this.path;
       self.transform.baseVal.appendItem(this.rotate(5));
};

 myPath.prototype.handleEvent= function(evt){
  self = evt.target;  
  console.log(self.getAttribute('d'));
     
 self.move = setInterval(()=>this.animate(),100);
       
}

svg.appendChild(new myPath(center.x,center.y).draw);

Answer 1

rotate(45 50 50) 是 transform XML 属性的格式。例如:

<path d="..." transform="rotate(45 50 50)" .../>

但是您正在 SVGTransform 对象上使用 Javascript rotate() 函数。 JS 函数的参数之间需要逗号。尝试:

rotate(45, 50, 50)

https://developer.mozilla.org/en/docs/Web/API/SVGTransform