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

动画SVG路径

1 个答案: