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

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)ごとにtranslate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>)を使用してそれを解決することができましたが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