перемещение «г» тега SVG с помощью JavaScript

Question

Я знаю SVG <g> тега не имеющий X и Y атрибуты, и единственный способ передать его использует transform как transform="translate(x,y)" и transform="rotate(45 50 50)"

Я пытаюсь сделать то же самое программируемый с использованием JavaScript, где я хочу переместить тег g, имеющий комбинацию rect и text, ниже мой код, так что ошибка у меня так g не двигается/не переводится, как только я нажимаю на нее?

var NS="http://www.w3.org/2000/svg";  
 
var SVG=function(h,w){ 
 
    var svg=document.createElementNS(NS,"svg"); 
 
    svg.width=w; 
 
    svg.height=h; 
 
return svg; 
 
} 
 
var svg=SVG(1200,1500); 
 
document.body.appendChild(svg); 
 

 
class myRect { 
 
    constructor(x,y,h,w,fill,name) { 
 
    this.g= document.createElementNS(NS,"g"); 
 
    this.name=name; 
 
    this.SVGObj= document.createElementNS(NS,"rect"); 
 
    self = this.SVGObj; 
 
     self.x.baseVal.value=x; 
 
     self.y.baseVal.value=y; 
 
     self.width.baseVal.value=w; 
 
     self.height.baseVal.value=h; 
 
     self.style.fill=fill; 
 
     
 
    this.text = document.createElementNS(NS, 'text'); 
 
    this.text.setAttribute('x', x+10); 
 
    this.text.setAttribute('y', y+20); 
 
    this.text.setAttribute('fill', '#000'); 
 
    this.text.textContent = '2'; 
 
    
 
    this.g.appendChild(self); 
 
    this.g.appendChild(this.text) 
 
    
 
    this.g.addEventListener("click",this,false); 
 
    } 
 
} 
 

 
Object.defineProperty(myRect.prototype, "node", { 
 
get: function node() { 
 
    return this.g; // this.SVGObj; 
 
} 
 
}); 
 

 
myRect.prototype.handleEvent= function(evt){ 
 
self = this.g; 
 
    switch (evt.type){ 
 
    case "click": 
 
     // alert(this.name); // this.animate();  
 
     if (typeof self.moving == 'undefined' || self.moving == false) self.moving = true; 
 
     else self.moving = false; 
 
    
 
    if(self.moving == true) 
 
     self.move = setInterval(()=>this.animate(),100); 
 
     else{ 
 
     clearInterval(self.move); 
 
     self.parentNode.removeChild(self); 
 
     }   
 
    break; 
 
    default: 
 
    break; 
 
} 
 
} 
 

 
myRect.prototype.animate = function() { 
 
     self = this.g; 
 
     self.transform="translate(200,200)"; 
 
     // self.x.baseVal.value+=1; 
 
     // self.y.baseVal.value+=1; 
 
}; 
 

 
    var r= new myRect(50,50,30,30,'#'+Math.round(0xffffff * Math.random()).toString(16),'this is my name'); 
 
    svg.appendChild(r.node);

UPDATE Я попытался self.setAttribute('transform','translate(10,10)'), но не работал, я был в состоянии сделать один шаг только один раз перейти с помощью self.setAttribute('transform','translate(10,10)'); где GetItem (0) получает первый элемент в атрибут преобразования, например transform="translate(1, 1) scale(2)" где getItem(0) получает translate(1, 1) матрицу и getItem(1) получает scale(2), как описано here

Но это еще не то, что мне нужно, мне нужно непрерывное движение раз я нажимаю g пока петля закончится.

Answer 1

Благодаря Mike Williamson, я был в состоянии решить ее разработки таможенных функции преобразования:

myRect.prototype.step = function(x,y) { 
    return svg.createSVGTransformFromMatrix(svg.createSVGMatrix().translate(x,y)); 
} 

и назвать его:

myRect.prototype.animate = function() { 
    self = this.g; 
    self.transform.baseVal.appendItem(this.step(1,1)); 
}; 

Полный код для любого из заинтересованных , составляет:

var NS="http://www.w3.org/2000/svg"; 
var SVG=function(el){ 
    return document.createElementNS(NS,el); 
} 

var svg = SVG("svg"); 
    svg.width='100%'; 
    svg.height='100%'; 
document.body.appendChild(svg); 

class myRect { 
    constructor(x,y,h,w,fill,name) { 
    this.g= SVG("g"); 
    this.name=name; 
    this.SVGObj= SVG('rect'); // document.createElementNS(NS,"rect"); 
     self = this.SVGObj; 
     self.x.baseVal.value=x; 
     self.y.baseVal.value=y; 
     self.width.baseVal.value=w; 
     self.height.baseVal.value=h; 
     self.style.fill=fill; 
     self.onclick="click(evt)"; 

this.text = SVG('text'); 
this.text.setAttribute('x', x+10); 
this.text.setAttribute('y', y+20); 
this.text.setAttribute('fill', '#000'); 
this.text.textContent = name; 

this.g.appendChild(self); 
// this.g.appendChild(this.text); // if required to be loaded from start up 

this.g.addEventListener("click",this,false); 
//(e)=>alert(e.target.parentNode.parentNode);/this is to check what is clicked 
    } 
} 

Object.defineProperty(myRect.prototype, "node", { 
    get:()=> return this.g; 
}); 

myRect.prototype.handleEvent= function(evt){ 
    self = evt.target.parentNode; // this returns the `g` element 
    switch (evt.type){ 
     case "click": 
      if (typeof self.moving == 'undefined' || self.moving == false) self.moving = true; 
      else self.moving = false; 

if(self.moving == true){ 
self.move = setInterval(()=>this.animate(),100); 
self.appendChild(this.text); // show the text node 

} 

    else{ 
    clearInterval(self.move); 
    self.removeChild(self.childNodes[1]); // remove the text node 
// self.parentNode.removeChild(self); // This removes the `g` element completly 
    }   
break; 
    default: 
    break; 
} 
} 

myRect.prototype.step = function(x,y) { 
    return svg.createSVGTransformFromMatrix(svg.createSVGMatrix().translate(x,y)); 
} 

myRect.prototype.animate = function() { 
    self = this.g; 
    self.transform.baseVal.appendItem(this.step(1,1)); 
}; 

for (var i = 0; i < 10; i++) { 
    var x = Math.random() * 100, 
     y = Math.random() * 300; 
    var r= new myRect(x,y,10,10,'#'+Math.round(0xffffff * Math.random()).toString(16),'click to stop'); 
    svg.appendChild(r.node); 
    } 

также можно получить по адресу JSFiddle

Answer 2

<html> 

<body> 
<div class="svg"></div> 
</body> 
<script> 
var NS="http://www.w3.org/2000/svg";  
var SVG=function(h,w){ 
    var svg=document.createElementNS(NS,"svg"); 
    svg.width=w; 
    svg.height=h; 
return svg; 
} 
var svg=SVG(1200,1500); 
var div =document.querySelector(".svg"); 
div.appendChild(svg); 

class myRect { 
    constructor(x,y,h,w,fill,name) { 
    this.g= document.createElementNS(NS,"g"); 
    this.name=name; 
    this.SVGObj= document.createElementNS(NS,"rect"); 
    self = this.SVGObj; 
     self.x.baseVal.value=x; 
     self.y.baseVal.value=y; 
     self.width.baseVal.value=w; 
     self.height.baseVal.value=h; 
     self.style.fill=fill; 

    this.text = document.createElementNS(NS, 'text'); 
    this.text.setAttribute('x', x+10); 
    this.text.setAttribute('y', y+20); 
    this.text.setAttribute('fill', '#000'); 
    this.text.textContent = '2'; 

    this.g.appendChild(self); 
    this.g.appendChild(this.text) 

    this.g.addEventListener("click",this,false); 
    } 
} 

Object.defineProperty(myRect.prototype, "node", { 
get: function node() { 
    return this.g; // this.SVGObj; 
} 
}); 

myRect.prototype.handleEvent= function(evt){ 
self = this.g; 
    switch (evt.type){ 
    case "click": 
     // alert(this.name); // this.animate();  
     if (typeof self.moving == 'undefined' || self.moving == false) self.moving = true; 
     else self.moving = false; 

    if(self.moving == true) 
     self.move = setInterval(()=>this.animate(evt),100); 
     else{ 
     clearInterval(self.move); 
     self.parentNode.removeChild(self); 
     }   
    break; 
    default: 
    break; 
} 
} 

myRect.prototype.animate = function(evt) { 
     self = this.g; 
     var recElement=self.childNodes[0]; 
     recElement.setAttribute("x",10); 
     recElement.setAttribute("y",10); 
     //self.transform="translate(200,200)"; 

}; 

    var r= new myRect(50,50,30,30,'#'+Math.round(0xffffff * Math.random()).toString(16),'this is my name'); 
    svg.appendChild(r.node); 


    </script>