6

私が必要とするのは、テキストを切り捨てて、svg長方形のサイズを埋めてから、フルサイズでポップアップすることmouse-overです。次のコードを使用してcssでテキストを非表示にしてからポップアップしようとしましたが、うまくいかないようです。

#text_trunc {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#text_trunc:hover{
    overflow: visible; 
    white-space: normal; 
    width: auto;
    position: absolute;
    background-color: rgba(0,0,0,0);
}

を使用してすべてのsvg要素を作成しました。これは、テキスト要素の をjavascript作成する場所ですid

text.setAttributeNS(null, "id", "text_trunc");

私の最善の推測は、svg切り捨てられない画像を作成することcssです...まだ解決策が必要です。前もって感謝します

4

2 に答える 2

4

<text>要素にはオーバーフローする「ボックス」がないため、「オーバーフロー」CSS プロパティは SVG では機能しません。

代わりに「clip-path」プロパティを試してみてください。SVG 固有の CSS プロパティです。切り捨てられたボックスのサイズであるクリップ パスを SVG で定義する必要があります。次に、CSS ルールで追加および削除します。

#text_trunc {
    clip-path: url(#truncbox);
}

#text_trunc:hover{
    clip-path: none;
}

残念ながら、このソリューションでは、自動省略記号のような手の込んだ動作は許可されていません。

于 2013-07-10T15:10:26.210 に答える
-1

以下のURLが参考になると思います

http://css-tricks.com/forums/discussion/12984/css-display-hidden-text-on-rollover/p1

于 2013-07-09T12:29:30.973 に答える