I'm trying to manipulate with mouse SVG path which represents symbol of electronics resistor. This symbol requires manipulation with end of the "leads" (if you can picture real resistor); therefore I am trying to achieve draging 1st point arround (2nd is still there) and to all points of path to behave proportionally in when drag the 1st point on new coordinates.

Try to group, try with trigonometry functions...so code is like:

   `<g id="r" >    <!-- R - group for symbol of electronics resistor -->
    <path d="M 200 20 v80 h30 v150 h-60 v-150 h30 m 0 150 v80 "
    fill="none" stroke="blue" stroke-width="5" />
    <circle  cx="200" cy="20" r="10"
    fill="blue"   />
    <circle  cx="200" cy="330" r="10"
    fill="blue"/>
    </g>`

Please, help.

I'm trying to manipulate with mouse SVG path which represents symbol of electronics resistor. This symbol requires manipulation with end of the "leads" (if you can picture real resistor); therefore I am trying to achieve draging 1st point arround (2nd is still there) and to all points of path to behave proportionally in when drag the 1st point on new coordinates.

Try to group, try with trigonometry functions...so code is like:

   `<g id="r" >    <!-- R - group for symbol of electronics resistor -->
    <path d="M 200 20 v80 h30 v150 h-60 v-150 h30 m 0 150 v80 "
    fill="none" stroke="blue" stroke-width="5" />
    <circle  cx="200" cy="20" r="10"
    fill="blue"   />
    <circle  cx="200" cy="330" r="10"
    fill="blue"/>
    </g>`

Please, help.

• javascript
• svg
• coordinate-transformation

• 1 I don't understand your question. Are you trying to translate the whole picture? In any case, adding transform attribute to g tag should be what you are looking for. – Soarer Commented Aug 14, 2011 at 8:41
• I'm trying to one (of two path points) when selected follows mousemove, but path proportions remains in case of mouse drag this one point. That means transforming and rotating arround second path point. Try to picture resistor, I take one end of the wire lead and rotating it (with stretch) arround second, or vice versa. Thank you anyway for kindness. – Alex Commented Aug 14, 2011 at 16:01

1 Answer 1

I think I've made roughly what you want: http://dl.dropbox./u/169269/resistor.svg

Click and drag on the resistor to scale and rotate it to that mouse position. In this version, the line thickness and circles also scale, but it shouldn't be too difficult to avoid that.

It does require trigonometry and transformations. The key part is the drag function, which I explain in more detail at: http://www.petercollingridge.co.uk/interactive-svg-ponents/draggable-svg-element

function drag(evt)
{
   if(selected_element != 0)
   {
      var resistor_x = 200;
      var resistor_y = 100;
      var mouse_x = evt.pageX;
      var mouse_y = evt.pageY;

      dx = resistor_x - mouse_x;
      dy = resistor_y - mouse_y;

      d = Math.sqrt(dx*dx + dy*dy);    // Find distance to mouse
      theta = 90+Math.atan2(dy, dx)*180/Math.PI;    //Find angle to mouse in degrees

      transform = "translate(200, 100) rotate(" + theta + ") scale(" + d/310 + ")" ;
      selected_element.setAttributeNS(null, "transform", transform);
   }
}

Note that this code assumes the resistor is 310 pixels long and rotating about (200, 100). Scaling and rotation transformations work centred on (0,0), so you should draw the resistor with the static point at (0,0) and then translate it to where you want.