Question

I have a text element within an SVG that I have applied jQuery ui draggable to. Whenever I try to drag it around, the top and left CSS attributes change as you would expect, however, the element itself does not move – it just stays where it is.

This defys everything I understand about positioning. It seems as though it is just ignoring the ‘top’ and ‘left’ rules altogether.

However, the plot thickens.

I have also applied ui-draggable to an image within the same svg and it’s working fine for that. When I drag it around, it moves as expected.

Most intriguingly, if I drag some text, then it won’t move however if I then move the image, then the text suddenly moves to where I had tried to drag it to!

Can someone provide any insight as to what is going on here please?

The HTML looks like this:

<svg id="k" width="220" height="440" preserveAspectRatio="none">
    <image xlink:href="http://u.r.l/media/1353519179-9178.png" width="220" height="440" preserveAspectRatio="none" x="0" y="0" style="position: relative; left: 2px; top: 3px;" class="ui-draggable" transform="rotate(0,112,223) translate(2,3)"></image>
    <text id="svgtxt" x="0" y="0" style="position: relative; left: 101px; top: 118px;" class="ui-draggable" transform="rotate(0,101,118) translate(101,118)">Hello, world!</text>
</svg>

The JavaScript looks like this:

// ...

$("#k image").draggable({
    refreshPositions : true
});

// Make the text element draggable
$("#k text").draggable({
    refreshPositions : true
});

// ...

Answer 1

The svg text element doesn’t do anything with position, because it adheres to the svg rendering model, not the CSS box model. For a list of properties supported in svg content, see the svg specification.

You can set position on the entire <svg> fragment if it’s inline in html, because in that case it’s laid out by CSS.