XML Elves

Hello,

I am trying to make an interesting effect happen with interactive SVG. I have implemented some code to allow boxes to be dragged around on the SVG canvas. The boxes are connected together by lines, and the ends of the lines will follow the boxes around so that the connections are maintained.

The boxes are moved by applying a transform to the element. I couldn't figure out how a transform might work on a line, so I'm actually resetting the line endpoints as the box moves.

The problem arises when I try to do some fancy visualization. I have added an arrow marker to one end of the line and I've widened the stroke and added a gradient to the line to indicate the direction more clearly.
Here is a URL to my example:
http://gaia.bme.gatech.edu:8081/GAViewer/ga2.svg
Click one of the edges to make an arrow appear. Click again to reverse the direction of the arrow.

If the boxes stay in the same vertical orientation to each other, the gradient looks great. but as soon as one box is moved across the vertical plane of another box, the gradient direction disagrees with the arrow direction.

I tried using a radial gradient, but the result is the same. The gradient seems to be based on the bounding box around the line, irrespective of the orientation of the line within the bounding box.

Can anyone suggest a way to get around this problem?

Thanks,
Todd