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

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

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

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

rotate(45, 50, 50)

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

Answer 2

我能够根据this link

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

＆＃13;

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);

＆＃13;

JavaScript围绕特定点`transform：rotate（）`

2 个答案: