CODEWITHSUNDEEP
javascriptsvgjquery-svg
nicholaswmin
nicholaswmin

Reputation: 22939

Positioning an SVG element using javascript

I am doing a modification on svg-edit. I am using a function to make a path element bigger or smaller based on width and height inputs by the user. The user selects an element and clicks on a button to fire up the function which takes the last known width and heght measurements and then asks from the user the new width and height values. It then creates a divisor which it uses to create a TRANSFORM MATRIX operation on the element to make it as big as the user wants.

The problem is that when transforming matrices, the elements also changes position.

I want when the user is asked for a width and height also to be asked for x,y position on canvas and then move the selected element to that position.

Is their a way of repositioning an svg element?

   function changeDimensions() 

    {
  svgNode = svgCanvas.getSelectedElems()[0];

var dims = Raphael.pathBBox(svgNode.getAttribute('d')); 
lasth = parseInt(dims.height); 
lastw= parseInt(dims.width);

var transformw=prompt("Enter your new width");
var transformh=prompt("Enter your new height");
newW=transformw/lastw;
 newH=transformh/lasth;

svgCanvas.changeSelectedAttribute("transform", "matrix(" + newW + ", 0, 0, " + newH + ", 0, 0)"); svgCanvas.recalculateAllSelectedDimensions(); }

Upvotes: 1

Views: 4992

Answers (1)

Superboggly
Superboggly

Reputation: 5834

Different svg elements have different attributes that they use to position themselves. For example rect's have x and y attributes but circles have cx, and cy. Path's do not have separate attributes.

However you can probably get what you need from a transform! Most svg elements will accept a transform attribute where you can assign a translation. E.g.

<path d="M10,10L20,100" transform="translate(30,40)"/>

In fact you can probably scale your path with the same transform attribute.

Upvotes: 2

Related Questions