How to move this polygon within red rectangle

Question

Edit

Here is fiddle - https://jsfiddle.net/Ldvj15dk/1/

This employee who is not working created this tree chart, now I need to move this polygon as showed below... but I am not sure what is the easiest way of doing so...

What changes to points should I make to move this polygon into triangle as showed in picture belwo ?

<svg width="100%" height="510">
 <g transform="translate(650,150)">
  <g transform="translate(0,100)">
   <g>
    <rect x="-150" y="-14.9" width="300" height="30" style="fill: blue"/>
    <text dx="-135" dy="0.3" text-anchor="start" style="fill: white">
     <tspan x="-10" dy="0.3em">Test Node</tspan>
    </text>
   </g><g>
    <rect x="125" y="-15" width="25" height="30" style="fill: red;"/>
    <polygon points="9.7,8.814 9.7,8.902 8.15,8.082 8.15,6.31 6.912,6.31 6.912,3.98 8.975,3.98 8.975,0 4.025,0 4.025,3.98 6.088,3.98 6.088,6.31 4.85,6.31 4.85,8.104 3.3,8.916 3.3,8.814 0,8.814 0,12 3.3,12 3.3,9.82 4.85,9.01 4.85,9.494 8.15,9.494 8.15,8.99 9.7,9.811 9.7,12 13,12 13,8.814 " style="fill: yellow;"/>
   </g>
  </g>
 </g>
</svg>

I would like to make it look like this,

Possible duplicate of [Draggables and Resizables in SVG](http://stackoverflow.com/questions/3614200/draggables-and-resizables-in-svg) — Daniel A. White, Jan 13 '17 at 14:15
Flagged as off-topic as the OP requests recommendations on off-site resources. — Jayx, Jan 13 '17 at 14:18
well that changes things. perhaps you need to see how d3 does drag drop. — Daniel A. White, Jan 13 '17 at 14:22
@DanielA.White but d3 won't let me drag and drop polygon though :S — Mathematics, Jan 13 '17 at 14:23
@DanielA.White I modified my question, sorry for not making it obvious — Mathematics, Jan 13 '17 at 14:26
@Jayx I am asking for approach, question wasn't worded correctly — Mathematics, Jan 13 '17 at 14:28
Why don't you simply use a transform? (PS: you can drag a polygon using D3) — Gerardo Furtado, Jan 13 '17 at 14:29
@GerardoFurtado is that the easiest way to move this polygon into this rectangle box ? :) — Mathematics, Jan 13 '17 at 14:36

score 1 · Accepted Answer · answered Jan 13 '17 at 14:49

The easiest and laziest solution is simply translating the polygon to the desired position. Here is an example (using magic numbers):

<svg width="100%" height="200">
 <g transform="translate(150,50)">
  <g transform="translate(0,0)">
   <g>
    <rect x="-150" y="-14.9" width="300" height="30" style="fill: blue"/>
    <text dx="-135" dy="0.3" text-anchor="start" style="fill: white">
     <tspan x="-10" dy="0.3em">Test Node</tspan>
    </text>
   </g><g>
    <rect x="125" y="-15" width="25" height="30" style="fill: red;"/>
    <polygon transform="translate(130,-4)" points="9.7,8.814 9.7,8.902 8.15,8.082 8.15,6.31 6.912,6.31 6.912,3.98 8.975,3.98 8.975,0 4.025,0 4.025,3.98 6.088,3.98 6.088,6.31 4.85,6.31 4.85,8.104 3.3,8.916 3.3,8.814 0,8.814 0,12 3.3,12 3.3,9.82 4.85,9.01 4.85,9.494 8.15,9.494 8.15,8.99 9.7,9.811 9.7,12 13,12 13,8.814 " style="fill: yellow;"/>
   </g>
  </g>
 </g>
</svg>

How to move this polygon within red rectangle

1 Answers1