Come modificare le dimensioni e le coordinate della casella `rect` con quando si utilizza jQuery / JS

Ho una scatola rect ( svg ). Il codice:

 
text

HTML: .

Voglio cambiare le dimensioni e le coordinate di rect ( svg ).

  

Apprezzo qualsiasi aiuto.

Aggiungi attributi onchange ai tuoi elementi di input :

  

height:

x:

y:

E scrivi gestori che influenzano gli attributi dell’elemento rect :

 var changeW = function() { var width = $('#mywidth').val(); var $v27 = $('#v-27'); $v27.attr('width', width); }; var changeH = function() { var height = $('#myheight').val(); var $v27 = $('#v-27'); $v27.attr('height', height); }; var changeX = function() { var xPos = $('#my-x').val(); var $v27 = $('#v-27'); $v27.attr('x', xPos); }; var changeY = function() { var yPos = $('#my-y').val(); var $v27 = $('#v-27'); $v27.attr('y', yPos); }; 

Demo di lavoro http://jsbin.com/xozome/5/edit

In alternativa …

Aggiungi un button grado di gestire un evento onclick :

  

Quindi scrivi una funzione per elaborare l’input dell’utente:

 var process = function(event) { event.preventDefault(); var width = $('#mywidth').val(); var height = $('#myheight').val(); var xPos = $('#my-x').val(); var yPos = $('#my-y').val(); var $v27 = $('#v-27'); $v27.attr('width', width); $v27.attr('height', height); $v27.attr('x', xPos); $v27.attr('y', yPos); }; 

Working Demo in http://jsbin.com/xozome/4/edit

Puoi usare il metodo prop di jQuery per impostare il valore di height e width . E inoltre puoi usare il metodo di position per impostare la posizione.

E poi puoi aggiungere input o cambiare listener di eventi per tracciare il valore richiesto …

 $("#mywidth,#myheight ,#my-x ,#my-y").on("change input",function(){ var coordinateX = $("#my-x").val(); var coordinateY = $("#my-y").val(); var height = $("#myheight").val(); var width = $("#mywidth").val(); if(coordinateX !=0 && coordinateY !=0 && height!=0 && width!=0){ $("#basicShapes").css({position:"absolute", left:coordinateX,top:coordinateY}); $("#v-27").prop("width", width); $("#v-27").prop("height", height); } }); 

Ed ecco il Working Fiddle

PS

Non sono bravo con i CSS, quindi è necessario lavorare sulla parte CSS per rendere il modulo di input relativo al rettangolo.

In bocca al lupo.