动画SVG路径

Question

Can I rotate an SVG path via the point of it's origin with an animation? I've tried using CSS keyframes on svg groups but that makes the path disappear. Ideally I don't want to be using javascript but if there's no other way I will.

The path is inside a css styled parallax which might be messing with the SVG viewbox as the coordinates don't seem right.

Answer 1

Try this, I'm using here ES6 class.

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