jQuery UI拖动时文本元素不移动

Question

我在一个SVG中有一个text元素，我已将jQuery ui应用到该元素中。每当我试图拖动它时，顶部和左侧的CSS属性就会如您所期望的那样发生变化，然而，元素本身并没有移动--它只是停留在原地。

这违背了我所理解的关于定位的一切。它似乎完全忽视了“上”和“左”的规则。

然而，情节变得更加浓重。

我还在同一svg中对图像应用了ui-draggable，它在这方面工作得很好。当我拖动它的时候，它会像预期的那样移动。

HTML如下所示：

<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>

JavaScript如下所示：

// ...

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

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

// ...

Answer 1

svgtext元素对position没有任何作用，因为它遵循svg呈现模型，而不是CSS框模型。有关svg内容中支持的属性列表，请参阅svg规范。

如果 position，因为在这种情况下，它是由CSS布局的。