0

我在 SVG 中有一个文本元素，我已将 jQuery ui 拖动到该文本元素。每当我尝试拖动它时，顶部和左侧的 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
});

// ...
4

2 回答 2

0

如果覆盖positioncss 属性，它将不接受topand left。

如果元素的“位置”属性具有“静态”以外的值，则称该元素已定位。

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

于 2012-11-26T10:30:33.860 回答
0

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

如果它在 html 中内联，您可以设置position整个 <svg> 片段，因为在这种情况下它是由 CSS 布局的。

于 2012-11-26T15:40:31.423 回答