Question

我在SVG中有一个文本元素，我已经应用了jQuery ui draggable。每当我尝试拖动它时，顶部和左侧CSS属性会如您所期望的那样发生变化，但是，元素本身不会移动 - 它只会保持原样。

这违背了我对定位的所有理解。似乎完全忽略了“顶级”和“左侧”规则。

然而，情节变浓了。

我还将ui-draggable应用于同一svg中的图像，并且它可以正常工作。当我拖动它时，它会按预期移动。

最有趣的是，如果我拖动一些文字，那么它将无法移动，但是如果我移动图像，那么文本突然移动到我试图拖动它的位置！

有人可以提供有关此处发生的事情的任何见解吗？

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

如果您覆盖position css属性，则不会接受top和left。

如果一个元素的'position'属性有一个元素，则说它被定位 “静态”以外的其他价值。

http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Answer 2

svg text元素对position没有任何作用，因为它遵循svg渲染模型，而不是CSS框模型。有关svg内容支持的属性列表，请参阅svg specification。

您可以在整个＆lt; svg＆gt;上设置position片段，如果它在html中是内联的，因为在那种情况下它是由CSS布局的。

文本元素不随jQuery UI Draggable移动

2 个答案: