0

ドラッグ可能なjQuery uiを適用したSVG内にテキスト要素があります。ドラッグしようとすると、期待どおりに上部と左側の 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
});

// ...
4

2 に答える 2

0

svg要素は、CSS ボックス モデルではなく svg レンダリング モデルに準拠しているため、 ではtext何もしません。positionSvg コンテンツでサポートされているプロパティの一覧については、svg 仕様を参照してください。

position<svg> フラグメントが html でインラインの場合は、CSS によってレイアウトされるため、フラグメント全体に設定できます。

于 2012-11-26T15:40:31.423 に答える
0

css 属性をオーバーライドすると、andpositionは受け入れられません。topleft

「位置」プロパティが「静的」以外の値を持つ場合、要素は配置されていると言われます。

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

于 2012-11-26T10:30:33.860 に答える