How to bind text to svg rect?

Question

The following code infact wraps text on a rectangle. But when I want to drag the rectangle, i also want the text to be dragged simultaneously,i.e, the text must be bound to the rectangle on drag and drop.

Please help me.

<svg xmlns="http://www.w3.org/2000/svg">
 <g id='Propositions'>
      <rect id='Proposition1' x='50' y='50' width='100' height='30' style='fill:#8FBC8F; '/>
      <text x="55" y="72" font-family="Verdana" font-size="14" fill="black" > Proposition1</text>
 </g>
</svg>

Thanks in advance..

Answer 1

Drag the <g> element(parentNode), rather than the rect. This, then will include the text in the drag/drop event.

e.g.

 <g id='Propositions'>
      <rect id='Proposition1' onmousemove=dragMe(evt) x='50' y='50' width='100' height='30' style='fill:#8FBC8F; '/>
      <text pointer-events=all x="55" y="72" font-family="Verdana" font-size="14" fill="black" > Proposition1</text>
 </g>

function dragMe(evt)
{
myG=evt.target.parentNode
myG.setAttribute("transform", "translate("+transX+" "+transY+")")
}