Animate SVG path

Question

Могу ли я повернуть SVG-путь через точку его происхождения с помощью анимации? Я пробовал использовать ключевые кадры CSS в svg-группах, но это приводит к исчезновению пути. В идеале я не хочу использовать 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);