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

Question

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

我想围绕特定点旋转路径，当我使用下面的 rotate(45 50 50) 而不是 rotate(x) 我得到这个错误：VM267:85 Uncaught SyntaxError: missing ) after argument list 我该怎么办？

注意没有兴趣使用任何现成的库来处理任务，只需要使用标准 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

我能够根据 this link

使用 translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>) 解决它

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.setAttribute("fill", "green");
document.body.appendChild(svg);
bbox = svg.getBoundingClientRect();
center = {
          x: this.bbox.left + this.bbox.width/2,
          y: this.bbox.top  + this.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 + "h75 v75 h-75 z";
     this.path.setAttribute("d", d);
     this.path.setAttribute("fill", "#F7931E");
     this.path.addEventListener("click",this,false);

     this.Pbox = svg.getBoundingClientRect();
     this.Pc = {
          x: this.Pbox.left + this.Pbox.width/2,
          y: this.Pbox.top  + this.Pbox.height/2
     };
   }
   get draw(){
       return this.path;
   }
 }
 
 myPath.prototype.rotate = function(x) {
   return svg.createSVGTransformFromMatrix(svg.createSVGMatrix().rotate(x));
   // https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform
}

 myPath.prototype.move = function(x,y) {
   return svg.createSVGTransformFromMatrix(svg.createSVGMatrix().translate(x,y));
   // https://developer.mozilla.org/en/docs/Web/SVG/Attribute/transform
}

myPath.prototype.animate = function() {
       self = this.path;
            self.transform.baseVal.appendItem(this.move(this.Pc.x,this.Pc.y));
            self.transform.baseVal.appendItem(this.rotate(5));
            self.transform.baseVal.appendItem(this.move(-this.Pc.x,-this.Pc.y));
};

 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 2

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

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

JavaScript rotate a SVG object around specific point `transform: rotate()`

javascript

svg

rotation

svg-animate