动画 SVG 路径

Question

我可以通过动画的原点旋转 SVG 路径吗？我尝试在 svg 组上使用 CSS 关键帧，但这会使路径消失。理想情况下，我不想使用 javascript，但如果没有其他方法我会。

路径位于 css 样式的视差内，这可能会与 SVG 视图框混淆，因为坐标似乎不正确。

Answer 1

试试这个，我这里用的是 ES6 类。

var NS="http://www.w3.org/2000/svg";  
var SVG=function(el){
    return document.createElementNS(NS,el);
}
 
 svg = SVG('svg');
    svg.width='100%';
    svg.height='100%';
document.body.appendChild(svg);


class myPath {
     constructor() {
     this.path=SVG('path');
     var d="M 10,90 Q 100,15 200,70 ";
     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) {
   return svg.createSVGTransformFromMatrix(svg.createSVGMatrix().rotate(x));
}

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().draw);