weiß ich SVG <g>
Tag wird mit X und Y nicht Attribute, und der einzige Weg, sie zu übertragen verwendet transform
wie transform="translate(x,y)"
und transform="rotate(45 50 50)"
bewegt SVG ‚g‘ Tag mit JavaScript
Ich versuche, das gleiche zu tun programmierbar mit JavaScript, wo ich einen g
Tag mit einer Kombination von rect
und text
verschieben möchte, ist unten mein Code, also welchen Fehler habe ich so die g
nicht bewegt/Übersetzen, sobald ich es anklicke?
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 ich self.setAttribute('transform','translate(10,10)')
versucht, aber hat nicht funktioniert, konnte ich einen Schritt EINEMmal die self.setAttribute('transform','translate(10,10)');
mit nur machen bewegen, wo getItem (0) in ein das erste Element bekommt Umwandlungsattribut zB transform="translate(1, 1) scale(2)"
wo getItem(0)
bekommt die translate(1, 1)
Matrix und getItem(1)
bekommt die scale(2)
als here
erklärt Aber das ist noch nicht das, was ich brauche, ich brauche eine kontinuierliche Bewegung, sobald ich die g
klicken, bis die Schleife beendet ist.
Könnten Sie bitte dies versuchen, aber ich habe nur ein g-Tag angenommen ,. – Ray
Sorry @Ray, Diese 'self.childNodes [0];' bewegen das erste Element im 'g', nicht das volle' g', nur das 'rect' Element bewegt sich, während das' text' Element bleiben ohne Bewegung, dh Sie bewegen Unterelement des 'g' –